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')(require('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']));