Gulpfile.js Example. Contains task runners for SCSS processing, Image minification, JS concat and uglification, HTML minification and a BrowserSync server.

gulpfile.js

// Default folder structure:
// dev/{*.html's,/js,/scss,/img}
// build/{*.html's,/js,/css,/img}


// Gulp.js configuration
var
  // modules
  gulp = require('gulp'),

  // image modules
  newer = require('gulp-newer'),
  imagemin = require('gulp-imagemin'),

  // html modules
  htmlclean = require('gulp-htmlclean'),

  // js modules
  concat = require('gulp-concat'),
  deporder = require('gulp-deporder'),
  stripdebug = require('gulp-strip-debug'),
  uglify = require('gulp-uglify'),

  // css modules
  sass = require('gulp-sass'),
  postcss = require('gulp-postcss'),
  assets = require('postcss-assets'),
  autoprefixer = require('autoprefixer'),
  mqpacker = require('css-mqpacker'),
  cssnano = require('cssnano'),

  // Browser Sync
  browserSync = require('browser-sync').create(),
  reload = browserSync.reload,

  // Development mode?
  devMode = true,

  // folders
  folder = {
    src: 'dev/',
    build: 'build/'
  }
  ;


  // PROCESSING TASKS--------------------------------

// Image processing task
gulp.task('images', function () {
  var out = folder.build + 'img/';
  return gulp.src(folder.src + 'img/**/*')
    .pipe(newer(out))
    .pipe(imagemin({ optimizationLevel: 5 }))
    .pipe(gulp.dest(out));
});

// HTML processing task
gulp.task('html', ['images'], function () {
  var
    out = folder.build,
    page = gulp.src(folder.src + '*.html')
      .pipe(newer(out))
      

  // minify production code
  if (!devMode) {
    page = page.pipe(htmlclean());
  }

  return page.pipe(gulp.dest(out));
});



// JavaScript processing task
gulp.task('js', function () {

  var jsbuild = gulp.src(folder.src + 'js/**/*')
    .pipe(deporder())
    .pipe(concat('main.js'))
    

  if (!devMode) {
    jsbuild = jsbuild
      .pipe(stripdebug())
      .pipe(uglify());
  }

  return jsbuild.pipe(gulp.dest(folder.build + 'js/'));

});

// CSS processing task
gulp.task('css', ['images'], function () {

  var postCssOpts = [
    assets({ loadPaths: ['img/'] }),
    autoprefixer({ browsers: ['last 2 versions', '> 2%'] }),
    mqpacker
  ];

  if (!devMode) {
    postCssOpts.push(cssnano);
  }

  return gulp.src(folder.src + 'scss/main.scss')
    .pipe(sass({
      outputStyle: 'nested',
      imagePath: 'img/',
      precision: 3,
      errLogToConsole: true
    }))
    .pipe(postcss(postCssOpts))
    .pipe(gulp.dest(folder.build + 'css/'))
    

});

// BrowserSync task
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: folder.build
    },
  })
})


// Task Runners ----------------------------

// run all tasks
gulp.task('run', ['html', 'css', 'js']);


// watch for changes
gulp.task('watch', function () {

  // image changes
  gulp.watch(folder.src + 'img/**/*', ['images']).on("change", reload);

  // html changes
  gulp.watch(folder.src + '*.html', ['html']).on("change", reload);

  // javascript changes
  gulp.watch(folder.src + 'js/**/*', ['js']).on("change", reload);

  // css changes
  gulp.watch(folder.src + 'scss/**/*', ['css']).on("change", reload);

});

// Default Task
gulp.task('default', ['run', 'browserSync', 'watch']);