Gulp workflow for Express with SASS, BrowserSync, Uglify and Nodemon

Question

Problems I'm facing:

• The browser doesn't reflect live changes in .scss or .js
• I don't understand whether we have to return the stream from the gulp.task() or not, I visited some websites and watched lectures some of which used return and some didn't.
• Cannot understand the flow of execution of gulpfile (which statement runs first, then which and so on)

This is my current code of gulpfile.js.

  "use strict";

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  var nodemon = require('gulp-nodemon');
  var browserSync = require('browser-sync').create();
  var uglify = require('gulp-uglify');

  gulp.task('default', ['nodemon'], function(){
    gulp.watch("src/sass/*.scss", ['sass']);
    gulp.watch("src/js/*.js", ['js']);
    gulp.watch("views/*.ejs").on('change',browserSync.reload);   //Manual Reloading
  })

  // Process JS files and return the stream.
  gulp.task('js', function () {
      return gulp.src('src/js/*.js')
          .pipe(uglify())
          .pipe(gulp.dest('public/javascripts'));
  });

  // Compile SASS to CSS.
  gulp.task('sass', function(){
       // gulp.src('src/sass/*.scss')  //without return or with return? why?
       return gulp.src('src/sass/*.scss')
               .pipe(sass().on('error', sass.logError))
               .pipe(gulp.dest('public/stylesheets'))
               .pipe(browserSync.stream());
  });


  // Setup proxy for local server.
  gulp.task('browser-sync', ['js','sass'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3000",
        port: 7000,
    });
  });


  gulp.task('nodemon', ['browser-sync'], function(cb){
    var running = false;
    return nodemon({script: 'bin/www'}).on('start', function(){
      if(!running)
      {
        running = true;
        cb();
      }
    });
  })

You may look at project structure at https://github.com/DivyanshBatham/GulpWorkflow

Answer 1

Try this:

  "use strict";

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  var nodemon = require('gulp-nodemon');
  var browserSync = require('browser-sync').create();
  var uglify = require('gulp-uglify');

  // First, run all your tasks
  gulp.task('default', ['nodemon', 'sass', 'js'], function(){

    // Then watch for changes
    gulp.watch("src/sass/*.scss", ['sass']);
    gulp.watch("views/*.ejs").on('change',browserSync.reload);   //Manual Reloading

    // JS changes need to tell browsersync that they're done
    gulp.watch("src/js/*.js", ['js-watch']);
  })

  // create a task that ensures the `js` task is complete before
  // reloading browsers
  gulp.task('js-watch', ['js'], function (done) {
      browserSync.reload();
      done();
  });

  // Process JS files and return the stream.
  gulp.task('js', function () {
      return gulp.src('src/js/*.js')
          .pipe(uglify())
          .pipe(gulp.dest('public/javascripts'));
  });

  // Compile SASS to CSS.
  gulp.task('sass', function(){
      return gulp.src('src/sass/*.scss')
               .pipe(sass().on('error', sass.logError))
               .pipe(gulp.dest('public/stylesheets'))
               .pipe(browserSync.stream());
  });


  // Setup proxy for local server.
  gulp.task('browser-sync', ['js','sass'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3000",
        port: 7000,
    });
  });


  gulp.task('nodemon', ['browser-sync'], function(cb){
    var running = false;
    return nodemon({script: 'bin/www'}).on('start', function(){
      if(!running)
      {
        running = true;
        cb();
      }
    });
  })

Also, you should consider adding the JS file to your index.ejs Eg: <script src='/javascripts/main.js'></script>

More help: https://browsersync.io/docs/gulp

Answer 2

I'll answer what I can.

1. You don't always have to return the stream in a gulp task but you should since you have some tasks, like 'browser-sync' that are dependent on other tasks, ['js','sass'], finishing. The purpose of returning the stream is to signal task completion. It is not the only way to signal task completion but one easy way. You are already doing this in your ['js','sass'] tasks with the return statements.

2. Your 'js' task needs a .pipe(browserSync.stream()); statement at the end of it like your 'sass' task. Or try .pipe(browserSync.reload({stream:true})); sometimes that variant works better.

3. You have both browser-sync and nodemon running - that I believe is unusual and may cause problems - they do much the same thing and do not typically see them running together. I would eliminate nodemon from your file.

4. Flow of execution:

   (a) default calls ['nodemon', 'sass', 'js'] : these run in parallel.

   (b) nodemon call 'browser-sync'. 'browserSync' must finish setting up before 'nodemon' gets into its function.

   (c) 'browser-sync', ['js','sass'], Here browser-sync is dependent upon 'js' and 'sass' which run in parallel and must finish and signal that they have finished by returning the stream for example before browser-sync continues.

   (d) After 'js', 'sass', 'browser-sync' and 'nodemon' have completed, your watch statements are set up and begin to watch.