gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
    cleanCSS = require('gulp-clean-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    prefix = require('gulp-autoprefixer'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload,
    htmlmin = require('gulp-htmlmin'),
    size = require('gulp-size'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    plumber = require('gulp-plumber'),
    deploy = require('gulp-gh-pages'),
    notify = require('gulp-notify'),
    sassLint = require('gulp-sass-lint'),
    del = require('del'),
    vinylPaths = require('vinyl-paths'),
    sourcemaps = require('gulp-sourcemaps'),
    colors = require('colors'),
    sassdoc = require('sassdoc'),
    runSequence = require('run-sequence'),
    webpack = require('webpack-stream'),
    UglifyJSPlugin = require('uglifyjs-webpack-plugin');

var bases = {
    app: 'src/',
    dist: 'dist/',
    root: 'dist/',
};

colors.setTheme({
    silly: 'rainbow',
    input: 'grey',
    verbose: 'cyan',
    prompt: 'grey',
    info: 'green',
    data: 'grey',
    help: 'cyan',
    warn: 'yellow',
    debug: 'blue',
    error: 'red'
});

var displayError = function (error) {
    // Initial building up of the error
    var errorString = '[' + error.plugin.error.bold + ']';
    errorString += ' ' + error.message.replace("\n", ''); // Removes new line at the end

    // If the error contains the filename or line number add it to the string
    if (error.fileName)
        errorString += ' in ' + error.fileName;

    if (error.lineNumber)
        errorString += ' on line ' + error.lineNumber.bold;

    // This will output an error like the following:
    // [gulp-sass] error message in file_name on line 1
    console.error(errorString);
}

var onError = function (err) {
    notify.onError({
        title: "Gulp",
        subtitle: "Failure!",
        message: "Error: <%= error.message %>",
        sound: "Basso"
    })(err);
    this.emit('end');
};

var sassOptions = {
    outputStyle: 'expanded'
};

var prefixerOptions = {
    browsers: ['last 2 versions']
};

// BUILD SUBTASKS
// ---------------

gulp.task('clean:dist', function () {

    return gulp.src(bases.dist, {allowEmpty: true})
        .pipe(vinylPaths((paths) => {
            return del(paths, {force: true})
        }));
});


gulp.task('styles', function () {
    return gulp.src(bases.app + 'scss/styles.scss')
        .pipe(plumber({errorHandler: onError}))
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions))
        .pipe(size({gzip: true, showFiles: true}))
        .pipe(prefix(prefixerOptions))
        .pipe(rename('styles.css'))
        .pipe(gulp.dest(bases.dist + 'css'))
        .pipe(reload({stream: true}))
        .pipe(cleanCSS({debug: true}, function (details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(size({gzip: true, showFiles: true}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(bases.dist + 'css'))
});

gulp.task('themes', function () {
    return gulp.src(bases.app + 'scss/themes/*.scss')
        .pipe(plumber({errorHandler: onError}))
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions))
        .pipe(size({gzip: true, showFiles: true}))
        .pipe(prefix(prefixerOptions))
        .pipe(gulp.dest(bases.dist + 'css/themes'))
        .pipe(reload({stream: true}))
        .pipe(cleanCSS({debug: true}, function (details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(size({gzip: true, showFiles: true}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(bases.dist + 'css/themes'))
});

gulp.task('browser-sync', function (cb) {
    browserSync({
        server: {
            baseDir: bases.dist
        }
    });
    cb();
});

gulp.task('deploy', function () {
    return gulp.src(bases.dist)
        .pipe(deploy());
});

gulp.task('js-app', function (cb) {
    return gulp.src(bases.app + '/js/*.js')
        .pipe(webpack({
            devtool: 'source-map',
            entry: './src/js/main.js',
            output: {
                filename: '[name].js',
                sourceMapFilename: '[name].map'
            },
            module: {
                loaders: [
                    {
                        test: /\.js$/,
                        exclude: /(node_modules|bower_components)/,
                        use: 'babel-loader'
                    },
                    {
                        enforce: 'pre',
                        test: /\.js$/,
                        use: "source-map-loader"
                    }
                ]
            },
            plugins: [
                new UglifyJSPlugin({
                    sourceMap: true,
                    uglifyOptions: {
                        compress: {
                            warnings: true,
                            drop_console: true,
                            unsafe: true
                        }
                    }
                })
            ]
        }))

        .pipe(gulp.dest(bases.dist + 'js'))
        .pipe(reload({stream: true}))
});

gulp.task('js-libs', function () {
    return gulp.src([bases.app + 'js/libs/*.js', '!' + bases.app + 'js/libs/modernizr.js'])
        .pipe(uglify())
        .pipe(size({gzip: true, showFiles: true}))
        .pipe(concat('libs.js'))
        .pipe(gulp.dest(bases.dist + 'js'))
        .pipe(reload({stream: true}));
});


gulp.task('copy', gulp.parallel(
    // copy icons to dist directly
    () => {
        return gulp.src(bases.app + 'icons/**/*.*')
            .pipe(size({gzip: true, showFiles: true}))
            .pipe(gulp.dest(bases.dist))
            .pipe(reload({stream: true}))
    },
    // copy img to dist directly

    //copy images to dist/image
    () => {
        return gulp.src(bases.app + 'images/**/*.*')
            .pipe(size({gzip: true, showFiles: true}))
            .pipe(gulp.dest(bases.dist + 'images/'))
            .pipe(reload({stream: true}))
    },

    () => {
        return gulp.src(bases.app + 'video/**/*.*')
            .pipe(size({gzip: true, showFiles: true}))
            .pipe(gulp.dest(bases.dist + 'video/'))
            .pipe(reload({stream: true}))
    },

    () => {
        // copy meta files to dist directly
        return gulp.src([bases.app + '*.xml', bases.app + '*.txt'])
            .pipe(size({gzip: true, showFiles: true}))
            .pipe(gulp.dest(bases.dist))
            .pipe(reload({stream: true}))
    },
    () => {

        return gulp.src([bases.app + 'manifest/**/*.*'])
            .pipe(gulp.dest(bases.root))
            .pipe(reload({stream: true}))
    }
    )
);

gulp.task('sass-lint', function () {
    return gulp.src([bases.app + 'scss/**/*.scss', '!' + bases.app + 'scss/libs/**/*.scss', '!' + bases.app + 'scss/states/_print.scss'])
        .pipe(sassLint())
        .pipe(sassLint.format())
        .pipe(sassLint.failOnError());
});

gulp.task('minify-html', function () {
    return gulp.src(bases.app + './*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(bases.dist))
        .pipe(reload({stream: true}));
});

gulp.task('imagemin', function () {
    return gulp.src(bases.app + 'img/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest(bases.dist + 'img'));
});

gulp.task('sassdoc', function () {
    var options = {
        dest: 'docs',
        verbose: true,
        display: {
            access: ['public', 'private'],
            alias: true,
            watermark: true,
        },
        groups: {
            'undefined': 'Ungrouped',
        },
        basePath: 'https://github.com/SassDoc/sassdoc',
    };
    return gulp.src(bases.app + 'scss/**/*.scss')
        .pipe(sassdoc(options));
});

gulp.task('watch', gulp.parallel(
    () => {
        return gulp.watch(bases.app + 'scss/**/*.scss', gulp.series('styles')).on('change', reload)
    },
    () => {
        return gulp.watch(bases.app + './*.html', gulp.series('minify-html')).on('change', reload)
    },
    () => {
        return gulp.watch(bases.app + 'img/*', gulp.series('imagemin')).on('change', reload)
    },
    () => {
        return gulp.watch(bases.app + 'js/*.js', gulp.series('js-app')).on('change', reload)
    }
));


// BUILD TASKS
// ------------

gulp.task('default',
    gulp.series('clean:dist', 'browser-sync', 'js-app', 'js-libs', 'imagemin', 'minify-html', 'styles', 'themes', 'copy', 'watch'));

gulp.task('build', gulp.series('clean:dist', 'js-app', 'js-libs', 'imagemin', 'minify-html', 'styles', 'copy'));