gulpfile.js

// Niv's gulpfile.js
var gulp = require('gulp'),

    // CSS related plugins.
    sass = require('gulp-sass'),
    //sass = require('gulp-ruby-sass'),
    //watchSass = require("gulp-watch-sass"),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    chalk = require('chalk'), // Colors console text
    csso = require('gulp-csso'), // Minify CSS files

    useref = require('gulp-useref'),

    // JS related plugins.
    uglify = require('gulp-uglify'), // minify js

    // Images plugins.
    imagemin = require('gulp-imagemin'),
    imageminMozjpeg = require('imagemin-mozjpeg'),

    // Utility related plugins.
    browserSync = require('browser-sync').create(),
    rename = require("gulp-rename"),
    cache = require('gulp-cache'),
    del = require('del'),
    inject = require('gulp-inject'),
    uglify = require('gulp-uglify'),
    runSequence = require('run-sequence');



var _html = {
  path: {
    src: 'src', // Source folder
    out: 'dist' // Outputs folder
  }
};




var config = {
  paths: {
    html: {
      src: _html.path.src + "/**/*.html",
      dest: _html.path.src + "/"
    },
    javascript: {
      htmlProj: {
        src: _html.path.src + "/assets/js/*.js",
        dest: _html.path.src + "/assets/js"
      }
    },
    sass: {
      htmlProj: {
        src: _html.path.src + "/**/*.scss",
        dest: _html.path.src + "/assets/css"
      }
    },
    css: {
      htmlProj: {
        src: _html.path.src + "/assets/css/**/*.css",
        dest: _html.path.src + "/assets/css"
      }
    },
    images: {
      src: _html.path.src + "/assets/images"
    },
    fonts: {
      src: _html.path.src + "/assets/fonts/**/*"
    }
  }
};



var _colorText = {
  error: chalk.bold.red,
  warning: chalk.keyword('orange')
};





gulp.task('html-sass', function () {
  return gulp.src( config.paths.sass.htmlProj.src )
      .pipe( sourcemaps.init() )
      .pipe( cache( sass({
        noCache: true,
        outputStyle: 'compressed'
      })).on('error', function (err) {
        console.error(_colorText.error('Error!', err.message));
        browserSync.notify('ERROR! Check the terminal', 15000); // Display error in the browser
        this.emit('end'); // Prevent gulp from catching the error and exiting the watch process
      }))
      .pipe(autoprefixer({
        remove: false, // Don't removes outdated prefixes
        browsers: [
          'last 2 versions',
          'safari >= 8',
          'ie >= 11',
          'ff >= 20',
          'ios 6',
          'android 4'
        ],
        add: true // Add any new prefixes
      }))
      //.pipe(sourcemaps.write('./') )
      .pipe(rename({
        suffix: '.min'
      }))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(config.paths.sass.htmlProj.dest) )
      .pipe(browserSync.reload({
        stream: true
      }));
});


gulp.task('html-scripts', function () {
  return gulp.src(config.paths.javascript.htmlProj.src)
      .pipe(uglify())
      .pipe(rename({
        suffix: '.min'
      }))
      .pipe(gulp.dest(config.paths.javascript.htmlProj.dest + '/min'))
      .pipe(browserSync.reload({
        stream: true
      }));
});

// Add js and css to files
gulp.task('useref', function () {
  return gulp.src(_html.path.src)
      .pipe(useref())
      .pipe(gulp.dest(_html.path.out))
});


gulp.task('index', function () {
  var target = gulp.src(config.paths.html.src);
  // It's not necessary to read the files (will speed up things), we're only after their paths:
  var sources = gulp.src([config.paths.sass.htmlProj.dest + '/*.css', config.paths.javascript.htmlProj.src], {read: false});

  return target.pipe(inject(sources))
      .pipe(gulp.dest(config.paths.html.dest));
});

gulp.task('clean:js.min', function() {
  return del([
      config.paths.javascript.htmlProj.dest + '/min'
  ]);
});

gulp.task('clean:css.min', function() {
  return del([
      config.paths.sass.htmlProj.dest + '/style.min.css'
  ]);
});

gulp.task('cache:clear', function (callback) {
  return cache.clearAll(callback)
});

gulp.task('html-image_compressed', function () {
  return gulp.src(config.paths.images.src + '/**/*.+(png|jpg|gif|svg)', {base: './'})
  // Caching images that ran through imagemin
      .pipe(cache(imagemin([
        imageminMozjpeg({
          quality: 90
        })
      ])))
      .pipe(gulp.dest('./'))
});







gulp.task('html-watch', ['html-sass', 'html-scripts'], function () {
  // Static server
  browserSync.init({
    server: {
      baseDir: _html.path.src
    }
  });
  // Reloads the browser whenever SCSS, HTML or JS files change
  //gulp.watch(config.paths.html.src, browserSync.reload);
  gulp.watch(config.paths.sass.htmlProj.src, ['html-sass']);
  gulp.watch(config.paths.javascript.htmlProj.src, ['html-scripts'] );
});



gulp.task('html', function (callback) {
  runSequence('clean:js.min', 'clean:css.min', ['html-sass', 'html-scripts', 'html-watch'],
      callback
  )
});