CODEWITHSUNDEEP
csssassgulpgulp-watchgulp-sass
Vertisan
Vertisan

Reputation: 738

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

EDIT: Files of my project: https://mega.nz/#!W9Jm3ZKJ!oeGu9sTtLUKZ3bs4L0zv3ysFaOGs7ARIckGJZ0tRMzQ

Upvotes: 1

Views: 1637

Answers (3)

Legend
Legend

Reputation: 462

I will not explain as you will crystal clear if you just see my image.

Also You will get the scss/sass error in console

Happy Programming !

enter image description here

I used Gulp + Browser-sync + gulp-sass

only this 3 package

Upvotes: 1

3rdthemagical
3rdthemagical

Reputation: 5350

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.

Upvotes: 1

Duderino9000
Duderino9000

Reputation: 2597

You can use gulp-plumber to catch the errors. Add this.emit('end'); to the handleError function to keep the watch running

Here's an article that covers it

Upvotes: 0

Related Questions