Vertisan Vertisan - 3 months ago 18
Sass (Sass) Question

Gulp - not compile all Sass files and stops on Sass error

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')
}

Answer

You need two tasks to build scss and to watch files.

Build scss:

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.