Gulp watch task sequence and Browser Sync

Question

I am a new to using Gulp, just trying to learn it...Now the problem i get and want to ask is the way to setup default task with watch and browser sync included I need to know am i doing something wrong

Can anybody improve my code here, i don't understand the relation of watch and browser sync, which tasks to run before browser-sync and when to watch

Below is my folder structure

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var plumber= require('gulp-plumber');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var imagemin = require ('gulp-imagemin');

//scripts task
//uglifies
gulp.task('scripts', function(){
gulp.src('js/*.js')
 .pipe(plumber())
 .pipe(uglify())
 .pipe(gulp.dest('build/js'));
});


//compress images
gulp.task('imagemin', function(){
        gulp.src('img/**/*.+(png|jpg|gif|svg)')
        .pipe(cache(imagemin({
      interlaced: true
    })))
        .pipe(gulp.dest('build/img'));
});

//CSS styles
gulp.task('less', function(){
 gulp.src('less/style.less')
 .pipe(plumber())
 .pipe(less())
 .pipe(gulp.dest('build/css'));
 
});

gulp.task('cssmin', function(){
gulp.src('build/css/style.css')
  .pipe(plumber())
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('build/css'))
  .pipe(reload({stream:true})); // inject into browsers

});

gulp.task('htmlmin', function(){
  return gulp.src('*.html')
    .pipe(htmlmin({removeComments: true}))
    .pipe(gulp.dest('build'))
    .pipe(reload({stream:true})); // inject into browsers
});



// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
    browserSync(['css/*.css', 'js/*.js','less/*.less', 'images/*'],{
        server: {
            baseDir: "./"
        }
    });
});



/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['browser-sync' , 'scripts', 'less', 'cssmin', 'htmlmin', 'imagemin'], function () {
    /* Watch scss, run the sass task on change. */
    gulp.watch(['less/**/*.less'], ['less'])
    //Watch css min
    gulp.watch(['build/css/*.css'], ['cssmin'])
    /* Watch app.js file, run the scripts task on change. */
    gulp.watch(['js/*.js'], ['scripts'])
    /* Watch .html files, run the bs-reload task on change. */
    gulp.watch(['*.html'], ['htmlmin']);



     // gulp.watch('app/*.html', browser-sync.reload); 
    // gulp.watch('app/js/**/*.js', browser-sync.reload); 
});

Now the process i want is

1. Compile less to css and then minify it to build folder
2. List item
3. Then Minify my HTML code
4. Then minify and concatenate my js
5. Compress all the images (Run only when some images changes)
6. Run the minified HTML with Browser Sync and watch the changes in all my source HTML,Less, images and JS

Answer 1

I would not worry about minification at this point if your goal is to run in development mode, this applies for imagemin (i would do that offline anyways), cssmin, htmlmin, and your js task that runs uglify by default. Ideally you would want to debug in the browser, and having your code minified will not help you much. If you add a dist task to perform the minification step.

I understand that you need Less to CSS for obvious reasons. So you are looking for something like this:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var sass = require('gulp-less');

// Static Server + watching less/html files
gulp.task('serve', ['less'], function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("less/*.less", ['less']);
    gulp.watch("*.html").on('change', browserSync.reload);
});

gulp.task('less', function(){
  gulp.src('less/style.less')
  .pipe(plumber())
  .pipe(less())
  .pipe(gulp.dest('build/css'))
  .pipe(browserSync.stream());

});

gulp.task('default', ['serve']);

This code invokes serve as the main task. Serve task has less as a dependency (which is going to be invoked first). Then, the callback is finally invoked. BrowserSync is initialized and a watch is added for both html files and less files.

Check out this page if you want to learn more about gulp + browsersync integration.