This is my gulpfile.js, but I have 2 problems with it.
1) On every error from Sass (ex. I save variable before set it), watcher stops and I need to start it again. Is possible to fix this?
2) Sass compile not getting all files changes. What is bad here?
var gulp = require('gulp');
var sass = require('gulp-sass');
// var imagemin = require('gulp-imagemin');
var rename = require("gulp-rename");
var runSequence = require('run-sequence');
var browserSync = require('browser-sync').create();
/**
* **********************
* Developer Taks
* **********************
*/
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'public'
},
})
});
/*
* Bootstrap Sass
* * * * * * * * * * *
*/
gulp.task( 'bootstrap-sass', function(){
return gulp.src( 'dev/sass/bootstrap.scss' )
.pipe( sass() )
.pipe( rename( 'bootstrap.min.css' ) )
.pipe( gulp.dest( 'public/assets/plugins/bootstrap/css' ) )
.on('error', swallowError)
.pipe( browserSync.reload({
stream: true
}))
});
/*
* Kopiowanie Bootstrap JS
* * * * * * * * * * *
*/
gulp.task( 'copy-boostrap-js', function() {
gulp.src( 'dev/js/bootstrap.js' )
.pipe( rename( 'bootstrap.min.js' ) )
.pipe( gulp.dest( 'public/assets/plugins/bootstrap/js' ) );
});
/*
* Główny Sass
* * * * * * * * * * *
*/
gulp.task( 'global-sass', function(){
return gulp.src( 'dev/sass/**/*.scss' )
.pipe( sass() )
.pipe( gulp.dest( 'public/assets/css' ) )
.on('error', swallowError)
.pipe( browserSync.reload({
stream: true
}))
});
/**
* **********************
* Production Taks
* **********************
*/
/*
* Kopiowanie FullPage
* * * * * * * * * * *
*/
gulp.task( 'copy-fullpage', function() {
gulp.src( 'dev/components/fullpage.js/dist/jquery.fullpage.min.css' )
.pipe( rename( 'fullpage.min.css' ) )
.pipe( gulp.dest( 'public/assets/plugins/fullpage/css' ) );
gulp.src( 'dev/components/fullpage.js/dist/jquery.fullpage.min.js' )
.pipe( rename( 'fullpage.min.js' ) )
.pipe( gulp.dest( 'public/assets/plugins/fullpage/js' ) );
});
/*
* Kopiowanie Swiper
* * * * * * * * * * *
*/
gulp.task( 'copy-swiper', function() {
gulp.src( 'dev/components/Swiper/dist/css/swiper.min.css' )
.pipe( gulp.dest( 'public/assets/plugins/swiper/css' ) );
gulp.src( 'dev/components/Swiper/dist/js/swiper.min.js' )
.pipe( gulp.dest( 'public/assets/plugins/swiper/js' ) );
});
/**
* ==================================================================================
* ==================================================================================
*/
/**
* Watch developer tasks
* gulp watch
*/ //
gulp.task( 'watch', [ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ], function () {
/* Bootstrap */
gulp.watch( 'dev/js/bootstrap.js', [ 'copy-boostrap-js' ] );
gulp.watch( 'dev/sass/bootstrap.scss', [ 'bootstrap-sass' ] );
/* Main Sass */
gulp.watch( 'dev/sass/**/*.scss', [ 'global-sass' ] );
gulp.watch( 'public/*.html', browserSync.reload );
});
/**
* Execute production tasks
* gulp build
*/
gulp.task( 'build', function() {
runSequence(
[ 'copy-fullpage', 'copy-swiper' ]
)
});
function swallowError (error) {
// If you want details of the error in the console
console.log(error.toString())
this.emit('end')
}
EDIT: Files of my project: https://mega.nz/#!W9Jm3ZKJ!oeGu9sTtLUKZ3bs4L0zv3ysFaOGs7ARIckGJZ0tRMzQ
You need two tasks to build scss and to watch files.
gulp.task('style:build', function () {
gulp.src(path.src.style)
.pipe(sass({errLogToConsole: true}))
.pipe(cssmin())
.pipe(gulp.dest(path.build.css));
});
String you need - {errLogToConsole: true}
- show errors to console instead finishing work.
Watch task:
gulp.task('watch', function () {
watch([path.watch.style], function (event, cb) {
gulp.start('style:build');
});
});
Where path.watch.style
is 'src/style/**/*.scss'
- you need to write here the path to your source folder.
Watch task doesn't have any dependencies, so remove [ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ]
.
P.S. Remove gulp.watch( 'dev/sass/bootstrap.scss', [ 'bootstrap-sass' ] );
. You have not to change anything at framework files. It's bad practice.
To customize bootstrap blocks you can override bootstrap variables (if you want all buttons have font-weight: bold;
you should override $btn-font-weight
variable).
So, first import file with default variables. Then import file with your own variables. Finally import blocks you really need, for example navbar or greed.
You main scss file may look like:
@import "../bootstrap/scss/variables.scss";
@import "variables.scss"; // Put your custom variables in here
@import "../bootstrap/scss/mixins.scss";
// Add navbar and greed from bootstrap
@import "../bootstrap/scss/navbar.scss";
@import "../bootstrap/scss/grid.scss";
// Add custom files here
@import 'custom.scss';
@import 'header.scss';
Main file sample found in Joseph Fitzsimmons article.