practice-klpda/gulpfile.js

let fs = require('fs'),
    gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename      = require('gulp-rename'),
    cssmin      = require('gulp-cssnano'),
    prefix      = require('gulp-autoprefixer'),
    plumber     = require('gulp-plumber'),
    sass = require('gulp-sass'),
    minify = require('gulp-minify'),
    notify = require('gulp-notify'),
    size = require('gulp-size'),
    cached = require('gulp-cached'),
    fileInclude = require('gulp-file-include'),
    sourcemaps = require('gulp-sourcemaps'),
    spritesmith = require('gulp.spritesmith');


let packageFile = JSON.parse(fs.readFileSync('source.info.json'));
let source = packageFile.source;
let destPath = packageFile.destPath;
let watchPath = packageFile.watch;

function reloadSourceData()
{
    packageFile = JSON.parse(fs.readFileSync('source.info.json'));
    source = packageFile.source;
    destPath = packageFile.destPath;
    watchPath = packageFile.watch;
}

let 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);
};

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

/**********************************************************************************************************
 * TASKS
 ***********************************************************************************************************/
gulp.task('html', function(){
    reloadSourceData();

    let dest = destPath.root + "/";

    return gulp.src(source.html)
        .pipe(fileInclude({
            prefix : '@@',
            context : {
                ROOT : '.'
            }
        }))
        .pipe(cached('include'))
        .pipe(size({ gzip:true, showFiles:true }))
        .pipe(gulp.dest(dest));
});


gulp.task('scss:compile', function () {
    reloadSourceData();

    let dest = destPath.root + "/" + destPath.assets + "/" + destPath.css;

    return gulp.src( source.css )
        .pipe(plumber({errorHandler: onError}))
        .pipe(sourcemaps.init())
        .pipe( sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe( prefix({}))
        .pipe( rename('style.css'))
        .pipe(gulp.dest(dest))
        .pipe(cssmin( { "discardComments": { "removeAll": true } }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(dest));
});


gulp.task('js:combine', function(){
    reloadSourceData();

    let dest = destPath.root + "/" + destPath.assets + "/" + destPath.js;
    let fileName = "common.js";

    return gulp.src( source.js )
        .pipe(sourcemaps.init())
        .pipe(concat(fileName))
        .pipe(minify({ext: {min : '.min.js'},noSource:true}))
        .pipe(size({ gzip: true, showFiles: true }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(dest));
});

gulp.task('sprite', function () {
    reloadSourceData();

    var spriteData = null;
    let dest = destPath.root + "/" + destPath.assets + "/icons";

    var packages = fs.readdirSync(source.icons);
    for(var i in packages) {
        spriteData = gulp.src('src/icons/'+packages[i]+'/*.png').pipe(spritesmith({
            imgName: packages[i] + '.png',
            cssName: packages[i] +'.css',
            padding:2,
            cssTemplate: 'src/icons/iconsTemplates.scss.handlebars',
            cssHandlebarsHelpers : {'packageName' : packages[i]},
            imgPath : '../icons/' + packages[i] + '.png',
            algorithm:'left-right',
            algorithmOpts:false
        }));
        spriteData.img.pipe(gulp.dest(dest));
        spriteData.css.pipe(gulp.dest("src/icons/"));
    }
    return true;
});

gulp.task('watch', function(){
    gulp.watch(watchPath.html, gulp.series(['html']));
    gulp.watch(watchPath.js, gulp.series(['js:combine']));
    gulp.watch(watchPath.css, gulp.series(['scss:compile']));
});



gulp.task('default', gulp.series(['html', 'js:combine', 'scss:compile']));