Last active
July 5, 2019 23:42
-
-
Save elshahat/acb07bf787ec17edd2c5efc796027f39 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { src, dest, watch, series, parallel } = require('gulp'), | |
server = require('browser-sync').create(), | |
sass = require('gulp-sass'), | |
sassLint = require('gulp-sass-lint'), | |
autoPrefixer = require('gulp-autoprefixer'), | |
sourcemaps = require('gulp-sourcemaps'), | |
plumber = require('gulp-plumber'), | |
uglify = require('gulp-uglify'), | |
kit = require('gulp-kit'), | |
notify = require('gulp-notify'), | |
babel = require('gulp-babel'); | |
concat = require('gulp-concat'), | |
rename = require('gulp-rename'), | |
jsHint = require('gulp-jshint'), | |
jsHintStylish = require('jshint-stylish'), | |
beeper = require('beeper'), | |
htmlbeautify = require('gulp-html-beautify'), | |
// Auto prefixer options | |
autoPrefixerOptions = { | |
browsers: ['last 15 versions', '> 1%', 'ie 8', 'ie 7', 'Firefox ESR'] | |
}, | |
// SASS options | |
sassOptions = { | |
errLogToConsole: true, | |
outputStyle: 'compressed' | |
}, | |
// JS options | |
jsOptions = { | |
mangle: false | |
}, | |
// KIT options | |
kitOptions = { | |
compilePartials: false | |
}, | |
// HTML Options | |
htmlOptions = { | |
indentSize: 4 | |
}, | |
// Define paths of source files and build directories | |
paths = { | |
js: ['src/js/**/!(app)*.js', 'src/js/app.js'], // JS files source - placing the last file as app.js which contains custom JS code | |
jsBuild: 'public/assets/js/', // JS build directory | |
styles: ['src/scss/*.scss', 'src/scss/**/*.scss'], // SASS files source | |
stylesBuild: 'public/assets/css/', // SASS build directory | |
kit: 'src/kit/**/*.kit', // KIT files source | |
kitBuild: 'public/' // KIT build directory | |
}; | |
// Init browser sync server | |
function browserSyncFn(done) { | |
server.init({ | |
server: { | |
baseDir: "public/", | |
directory: true, | |
notify: false | |
} | |
}); | |
done(); | |
} | |
// Compile KIT files to html | |
function buildKitFiles() { | |
return src(paths.kit) | |
.pipe(plumbError()) | |
.pipe(kit(kitOptions)) | |
.pipe(htmlbeautify(htmlOptions)) | |
.pipe(dest(paths.kitBuild)) | |
.on("end", server.reload) | |
.pipe(notify({ | |
"message": "KIT Files Compiled!", | |
"onLast": true | |
})); | |
} | |
// Compile SASS files to CSS with uto prefixed styles and with sourcemaps files | |
function buildStyles() { | |
return src(paths.styles) | |
.pipe(plumbError()) | |
.pipe(sourcemaps.init()) | |
.pipe(sass(sassOptions)) | |
.pipe(autoPrefixer(autoPrefixerOptions)) | |
.pipe(sourcemaps.write('/')) | |
.pipe(dest(paths.stylesBuild)) | |
.pipe(server.reload({ | |
stream: true | |
})) | |
.pipe(notify({ | |
"message": "CSS Built Completed!", | |
"onLast": true | |
})); | |
} | |
// Concat, rename, uglify and export all files into one file | |
function buildJS() { | |
return src(paths.js) | |
.pipe(plumbError()) | |
.pipe(babel({ | |
presets: ['@babel/env'] | |
})) | |
.pipe(concat('app.js')) | |
.pipe(dest(paths.jsBuild)) | |
.pipe(rename('app.min.js')) | |
.pipe(uglify(jsOptions)) | |
.pipe(dest(paths.jsBuild)) | |
.pipe(server.stream()) | |
.pipe(notify({ | |
"message": "JS Uglify Completed!", | |
"onLast": true | |
})); | |
} | |
// Check SASS errors and enhancements before building | |
function checkSassErrors() { | |
return src(paths.styles) | |
.pipe(plumbError()) | |
.pipe(sassLint({ | |
options: { | |
formatter: 'stylish', | |
'merge-default-rules': false | |
} | |
})) | |
.pipe(sassLint.format()) | |
.pipe(sassLint.failOnError()) | |
} | |
// Check JS error and enhancements before building | |
function checkJsErrors() { | |
return src('src/js/app.js') | |
.pipe(plumbError()) | |
.pipe(jsHint({ | |
esversion: 6 // Define the JavaScript version to use in the project | |
})) | |
.pipe(jsHint.reporter(jsHintStylish)) | |
} | |
// Watch SASS files changes then check SASS errors and finally compile files to CSS with auto prefixed styles and with sourcemaps files | |
function watchStyleFiles() { | |
watch( | |
paths.styles, | |
{ | |
events: 'all', | |
ignoreInitial: false | |
}, | |
series(checkSassErrors, buildStyles) | |
); | |
} | |
// Watch JS files changes then check JS errors, concat files, rename files and finally uglify the output JS file | |
function watchJsFiles() { | |
watch( | |
paths.js, | |
{ | |
events: 'all', | |
ignoreInitial: false | |
}, | |
series(checkJsErrors, buildJS) | |
); | |
} | |
// Watch Kit files changes and build them to HTML | |
function watchKitFiles() { | |
watch( | |
paths.kit, | |
{ | |
events: 'all', | |
ignoreInitial: false | |
}, | |
series(buildKitFiles) | |
); | |
} | |
// Global Error Handler | |
function plumbError() { | |
return plumber({ | |
errorHandler: function (error) { | |
notify.onError({ | |
templateOptions: { | |
date: new Date() | |
}, | |
title: "Gulp error in " + error.plugin, | |
message: error.formatted | |
})(error); | |
beeper(); | |
this.emit('end'); | |
} | |
}) | |
} | |
/* | |
Default functions to run with running gulp | |
1. Run the browserSync server to serve files from the "public/" folder | |
2. Run SASS files watch command to check for SASS errors and finally create source map files with CSS files | |
3. Run JS files watch command to check JS errors and finally concat, rename, uglify and export all files into one file | |
4. Run KIT files watch command to compile KIT files into HTML | |
*/ | |
exports.default = parallel(browserSyncFn, watchStyleFiles, watchJsFiles, watchKitFiles); | |
/* | |
Build commands with gulp | |
1. Build SASS files: gulp buildStyles | |
2. Build JS files: gulp buildJS | |
3. Build Kit files: gulp buildKitFiles | |
*/ | |
exports.buildStyles = buildStyles; | |
exports.buildJS = buildJS; | |
exports.buildKitFiles = buildKitFiles; | |
/* | |
Watch commands with gulp | |
1. Watch SASS files: gulp watchStyleFiles | |
2. Watch JS files: gulp watchJsFiles | |
3. Watch Kit files: gulp watchKitFiles | |
*/ | |
exports.watchStyleFiles = watchStyleFiles; | |
exports.watchJsFiles = watchJsFiles; | |
exports.watchKitFiles = watchKitFiles; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment