Gulp script to process stylesheets using sass, and Javascript using babel, concat, and uglify, and use browsersync for development with live-reloading

01-gulpfile.js

const gulp         = require('gulp'),
      gutil        = require('gulp-util'),
      eslint       = require('gulp-eslint'),
      sass         = require('gulp-sass'),
      postcss      = require('gulp-postcss'),
      autoprefixer = require('autoprefixer'),
      stylelint    = require('gulp-stylelint')
      babel        = require('gulp-babel'),
      concat       = require('gulp-concat'),
      ngAnnotate   = require('gulp-ng-annotate'),
      uglify       = require('gulp-uglify'),
      iife         = require('gulp-iife'),
      rename       = require('gulp-rename'),
      sourcemaps   = require('gulp-sourcemaps'),
      browserSync  = require('browser-sync').create(),
      del          = require('del');

const src       = './src',
      srcAssets = src + '/assets/**/*',
      srcScss   = src + '/scss/**/*.scss',
      srcJs     = src + '/js/**/*.js',
      srcViews  = src + '/views/**/*.html';

const dist       = './dist',
      distAssets = dist + '/assets',
      distCss    = dist + '/css',
      distJs     = dist + '/js',
      distViews  = dist + '/views';

/**
 * Custom task methods
 */
var tasks = {
    /**
     * Delete the dist folder.
     */
    clean: function() {
        return del.sync([ dist ]);
    },
    /**
     * Copy static assets.
     */
    assets: function() {
        return gulp.src(srcAssets)
            .pipe(gulp.dest(distAssets));
    },
    /**
     * Compile Sass stylesheets, and auto-prefix.
     */
    styles: function() {
        var processors = [ 
            autoprefixer({ browsers: [ 'last 2 versions' ] }) 
        ];
        return gulp.src(srcScss)
            .pipe(sass())
            .pipe(postcss(processors))
            .pipe(gulp.dest(distCss));
    },
    /**
     * Linting.
     */
    stylelint: function() {
        return gulp.src(srcScss)
            .pipe(stylelint({
                failAfterError: false,
                reporters: [
                    { formatter: 'string', console: true }
                ]
            }));
    },
    /**
     * Transpile, concat, and minify Javascript file.
     */
    scripts: function() {
        return gulp.src(srcJs)
            .pipe(sourcemaps.init())
            .pipe(concat('app.js'))
            .pipe(babel())
            .pipe(ngAnnotate())
            .pipe(iife())
            .pipe(gulp.dest(distJs))
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest(distJs));
    },
    /**
     * Linting.
     */
    eslint: function() {
        return gulp.src([ 'gulpfile.js', srcJs ])
            .pipe(eslint())
            .pipe(eslint.format()); 
    },
    /**
     * AngularJS Views.
     */
    views: function() {
        gulp.src(src + '/index.html').pipe(gulp.dest(dist));
        return gulp.src(srcViews)
            .pipe(gulp.dest(distViews));
    },
    /**
     * Browser Sync.
     */
    browserSync: function() {
        browserSync.init({
            server: {
                baseDir: dist
            }
        });
    }
};


/**
 * Custom tasks.
 */
gulp.task('clean', tasks.clean);
gulp.task('assets', tasks.assets);
gulp.task('styles', tasks.styles);
gulp.task('stylelint', tasks.stylelint);
gulp.task('scripts', tasks.scripts);
gulp.task('eslint', tasks.eslint);
gulp.task('views', tasks.views);
gulp.task('browser-sync', tasks.browserSync);

gulp.task('reload-styles',  [ 'styles' ],  () => { browserSync.reload(); });
gulp.task('reload-scripts', [ 'scripts' ], () => { browserSync.reload(); });
gulp.task('reload-views',   [ 'views' ],   () => { browserSync.reload(); });


/**
 * Build task.
 */
gulp.task('build', [ 'assets', 'styles', 'scripts', 'views' ]);


/**
 * Dev/Watch task.
 */
gulp.task('watch', [ 'build', 'browser-sync' ], () => {
    // watch:styles
    gulp.watch(srcScss, [ 'stylelint', 'reload-styles' ]);

    // watch:scripts
    gulp.watch(srcJs, [ 'eslint', 'reload-scripts' ]);

    // watch:views
    gulp.watch([ src + '/index.html', srcViews ], [ 'reload-views' ]);

    gutil.log(gutil.colors.bgGreen('Watching for changes...'));
});

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

02-package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-preset-es2015-without-strict": "0.0.2",
    "browser-sync": "^2.12.3",
    "del": "^2.2.0",
    "eslint-config-angular": "^0.5.0",
    "eslint-plugin-angular": "^1.0.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.0",
    "gulp-eslint": "^2.0.0",
    "gulp-iife": "^0.3.0",
    "gulp-jshint": "^2.0.0",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-postcss": "^6.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-stylelint": "^2.0.2",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "stylelint": "^6.3.3",
    "stylelint-config-standard": "^7.0.0"
  }
}

03-.stylelintrc

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": "tab"
  }
}

04-.eslintrc

{
  "parserOptions": {
    "ecmaVersion": 6
  },
  
  //"extends": "eslint:recommended"
  "extends": "angular"
}

05-.babelrc

{
  "presets": [ "es2015-without-strict" ]
}