Skip to content

Instantly share code, notes, and snippets.

@GlinZachariah
Last active October 3, 2021 15:50
Show Gist options
  • Save GlinZachariah/2b7fe25ddde08f42007fa06f5ac62c3f to your computer and use it in GitHub Desktop.
Save GlinZachariah/2b7fe25ddde08f42007fa06f5ac62c3f to your computer and use it in GitHub Desktop.
Gulp web automation
const { src, dest, series, watch } = require('gulp');
const del = require('del');
const sass = require('gulp-sass')(require('sass'));
const plumber = require("gulp-plumber");
const uglify = require("gulp-uglify");
const cssmin = require("gulp-cssmin");
const htmlmin = require("gulp-htmlmin");
const babel = require('gulp-babel');
const prefix = require('gulp-autoprefixer');
const mocha = require('gulp-mocha');
const browserSync = require('browser-sync').create();
//DEFAULT TASK
function defaultTask(cb) {
// place code for your default task here
cb();
}
//GULP SASS
function buildStylesTask(cb){
return src('./sass/**/*.scss')
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(prefix())
.pipe(cssmin())
.pipe(dest('./dist/css/'))
}
//CLEANUP
async function cleanup(){
await del(['./dist/**']);
}
//BABEL - GIVE SUPPORT FOR ES2015 AND UGLIFY
function buildBabel(){
return src('./js/**/!(*.spec).js')
.pipe(plumber())
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(dest('./dist/js/'))
}
//MOCHA - GIVE MOCHA SUPPORT FOR TESTING
async function buildTest(){
return await src('./test/**/*.spec.js')
.pipe(plumber())
.pipe(mocha())
.once('error', err => {
console.error('The tests failed to complete with below reason ',{error:err});
process.exit(1);
})
.once('end', () => {
process.exit();
})
}
//BUILDING HTML
function buildHTML(){
return src('./html/**/*.html')
.pipe(htmlmin({
collapseWhitespace:true,
collapseInlineTagWhitespace:true,
removeTagWhitespace:true
}))
.pipe(dest('./dist/'));
}
//WATCHING BUILD FILES
exports.watch = function buildWatch(){
watch('./sass/**/*.scss',buildStylesTask).on("change",browserSync.reload);
watch('./js/**/*.js',buildBabel).on("change",browserSync.reload);
watch('./html/**/*.html',buildHTML).on("change",browserSync.reload);
browserSync.init({
server: "./dist/",
port:8088,
https:true,
cors:true
});
}
exports.default = defaultTask;
exports.buildcss = buildStylesTask;
exports.buildjs = buildBabel;
exports.buildhtml = buildHTML;
exports.cleanup = cleanup;
exports.test = buildTest;
exports.build = series(cleanup,buildStylesTask,buildBabel,buildHTML);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment