title: Gulp watch task sequence and Browser Sync
body: <p>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</p>
  
  <p>Can anybody improve my code here, <strong>i don't understand the relation of watch and browser sync, which tasks to run before browser-sync and when to watch</strong></p>
  
  <p>Below is my folder structure</p>
  
  <p><a href="https://i.stack.imgur.com/foaTB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/foaTB.png" alt="my folder structure for gulp project"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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); 
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Now the process i want is</strong> </p>
  
  <ol>
  <li>Compile less to css and then minify it to build folder</li>
  <li>List item</li>
  <li>Then Minify my HTML code</li>
  <li>Then minify and concatenate my js</li>
  <li>Compress all the images (Run only when some images changes)</li>
  <li>Run the minified HTML with Browser Sync and watch the changes in all my source HTML,Less, images and JS</li>
  </ol>