Skip to content

Instantly share code, notes, and snippets.

@elshahat
Last active July 5, 2019 23:42
Show Gist options
  • Save elshahat/acb07bf787ec17edd2c5efc796027f39 to your computer and use it in GitHub Desktop.
Save elshahat/acb07bf787ec17edd2c5efc796027f39 to your computer and use it in GitHub Desktop.
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