Skip to content

Instantly share code, notes, and snippets.

@choyan

choyan/gulpfile.js

Last active Mar 24, 2020
Embed
What would you like to do?
const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const del = require('del');
const log = require('fancy-log');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const critical = require('critical');
const browserSync = require('browser-sync');
/*******************
* Variables
*******************/
const paths = {
html: {
src: 'src/*.html',
dest: 'dist'
},
fonts: {
src: 'src/fonts/**/*',
dest: 'dist/fonts'
},
sass: {
src: 'src/sass/**/*.sass',
},
scss: {
src: 'src/scss/**/*.scss',
},
css: {
src: 'src/css/**/*.css',
dest: 'dist/css/'
},
scripts: {
src: 'src/js/**/*.js',
dest: 'dist/js/'
},
images: {
src: 'src/img/**/*',
dest: 'dist/img'
}
};
const finalFiles = {
css: ['css/styles.min.css'],
js: ['js/scripts.min.js']
};
const asset = {
css: [
'css/bootstrap.css',
'css/font-awesome.min.css',
'css/animate.css',
'css/jquery-ui.css',
'css/magnific-popup.css',
'css/owl.carousel.css',
'css/select2.min.css',
'css/simple-line-icons.css',
'css/slick.css',
'css/trumbowyg.min.css',
'css/venobox.css',
'css/style.css',
],
js: [
'js/jquery.min.js',
'js/uikit.min.js',
'js/popper.js',
'js/bootstrap.min.js',
'js/chart.bundle.min.js',
'js/grid.min.js',
'js/jquery-ui.min.js',
'js/jquery.barrating.min.js',
'js/jquery.countdown.min.js',
'js/jquery.counterup.min.js',
'js/jquery.easing1.3.js',
'js/jquery.magnific-popup.min.js',
'js/owl.carousel.min.js',
'js/select2.full.min.js',
'js/slick.min.js',
'js/tether.min.js',
'js/trumbowyg.min.js',
'js/venobox.min.js',
'js/waypoints.min.js',
'js/dashboard.js',
'js/main.js',
'js/map.js',
],
};
const srcAsset = {
css: [],
js: []
},
distAsset = {
css: [],
js: []
};
function convertToFileSource(srcFiles, folderName, arrayName) {
srcFiles.css.forEach((element) => {
arrayName.css.push(folderName + '/' + element);
});
srcFiles.js.forEach((element) => {
arrayName.js.push(folderName + '/' + element);
});
}
convertToFileSource(asset, 'src', srcAsset);
convertToFileSource(finalFiles, 'dist', distAsset);
/*******************
* Asset injection
*******************/
function injectSrcAssets() {
return gulp
.src(paths.html.src)
.pipe(plugins.inject(gulp.src(asset.css, {
read: false,
addRootSlash: true,
cwd: __dirname + '/src'
}), {
starttag: '<!-- inject:header:{{ext}} -->'
}))
.pipe(plugins.inject(gulp.src(asset.js, {
read: false,
addRootSlash: true,
cwd: __dirname + '/src'
}), {
starttag: '<!-- inject:footer:{{ext}} -->'
}))
.pipe(gulp.dest('./src'));
}
function injectDistAssets() {
return gulp
.src('dist/*.html')
.pipe(plugins.inject(gulp.src(finalFiles.css, {
read: false,
addRootSlash: true,
cwd: __dirname + '/dist'
}), {
starttag: '<!-- inject:header:{{ext}} -->'
}))
.pipe(plugins.inject(gulp.src(finalFiles.js, {
read: false,
addRootSlash: true,
cwd: __dirname + '/dist'
}), {
starttag: '<!-- inject:footer:{{ext}} -->'
}))
.pipe(gulp.dest('./dist'));
}
/*******************
* HTML Tasks
*******************/
function minifyHTML() {
return gulp
.src('dist/*.html')
.pipe(plugins.htmlmin({
collapseWhitespace: true,
removeComments: true,
minifyCSS: true,
minifyJS: true,
removeEmptyAttributes: true
}))
.pipe(gulp.dest('dist/'));
}
/*******************
* JS Tasks
*******************/
function concatJS() {
return gulp
.src(srcAsset.js)
.pipe(plugins.concat('scripts.min.js'))
.pipe(plugins.size({
showFiles: true,
gzip: true
}))
.pipe(gulp.dest(paths.scripts.dest));
}
function babelConvert() {
return gulp
.src('src/js/main.js')
.pipe(plugins.babel({
presets: ['@babel/env']
}))
.on('end', function () {
log('Done babel compiling...');
})
.pipe(gulp.dest(paths.scripts.src));
}
function minifyJS() {
return gulp
.src(distAsset.js)
.pipe(
plugins.sourcemaps.init({
loadMaps: true,
largeFile: true,
})
)
.pipe(plugins.uglify())
.on('end', function () {
log('Done uglifying...');
})
.pipe(plugins.sourcemaps.write('./maps/'))
.pipe(plugins.size({
showFiles: true,
gzip: true
}))
.pipe(gulp.dest(paths.scripts.dest));
}
/*******************
* CSS Tasks
*******************/
//use to concat css files
function concatCSS() {
return gulp.src(srcAsset.css)
.pipe(plugins.concat('styles.min.css'))
.pipe(plugins.size({
showFiles: true,
gzip: true
}))
.on('error', function (err) {
log.error(err.message);
})
.pipe(gulp.dest(paths.css.dest));
}
function compileSCSS() {
return gulp
.src('./src/scss/style.scss')
.pipe(plugins.sass({outputStyle: 'expanded'}).on('error', plugins.sass.logError))
.pipe(plugins.sourcemaps.write('maps'))
.pipe(plugins.size({
showFiles: true,
gzip: true
}))
.pipe(plugins.rename('style.css'))
.pipe(gulp.dest('./src/css/'));
}
function RemoveCSS() {
let uncssOptions = {
html: ['dist/*.html'],
};
return gulp
.src('src/css/bootstrap.min.css')
.pipe(plugins.postcss([
require('autoprefixer'),
require('cssnano'),
]))
.pipe(plugins.uncss(uncssOptions))
.on('error', function (err) {
log.error(err.message);
})
.pipe(gulp.dest('dist/'));
}
function minifyCSS() {
return gulp
.src(distAsset.css)
.pipe(
plugins.sourcemaps.init({
loadMaps: true,
largeFile: true,
})
)
.pipe(plugins.postcss([
require('autoprefixer'),
require('cssnano')
]))
.on('error', function (err) {
log.error(err.message);
})
.pipe(plugins.sourcemaps.write('./maps/'))
.pipe(plugins.size({
showFiles: true,
gzip: true
}))
.pipe(gulp.dest(paths.css.dest));
}
/*******************
* Build Tasks
*******************/
function copyHTML() {
return gulp
.src(paths.html.src)
.pipe(gulp.dest('dist'));
}
function copyFonts(done) {
gulp.src(paths.fonts.src)
.pipe(gulp.dest('dist/fonts'));
done();
}
const clean = () => del(['dist']);
// FindOut Critical CSS
function extractCriticalCSS(done) {
// code...
critical.generate({
inline: true,
base: './dist',
dimensions: [{
width: 320,
height: 480
}, {
width: 768,
height: 1024
}, {
width: 1280,
height: 960
}],
src: 'index.html',
dest: 'index.html',
minify: true,
extract: false,
ignore: ['@font-face', /url\(/]
});
done();
}
function imgMin() {
//use to optimize images
return gulp
.src(paths.images.src)
.pipe(plugins.changed(paths.images.dest))
.pipe(
imagemin([
imagemin.gifsicle({
interlaced: true,
}),
imageminMozjpeg({
quality: 75,
progressive: true
}),
imagemin.optipng({
optimizationLevel: 5,
}),
imagemin.svgo({
plugins: [{
removeViewBox: true
}, {
cleanupIDs: false,
collapseGroups: true
}]
})
])
)
.on('error', function (err) {
log.error(err.message);
})
.pipe(plugins.size({
showFiles: true,
gzip: true
}))
.pipe(gulp.dest(paths.images.dest));
}
/*****************************
* Watch Files and Live reload
****************************/
// watch Sass files for changes, run the Sass preprocessor with the 'sass' task and reload
function serve() {
browserSync.init({
open: false,
port: 8000,
server: {
baseDir: 'src/',
index: 'index.html'
},
});
gulp.watch(paths.scss.src, gulp.series([compileSCSS]));
gulp.watch(paths.images.src, gulp.series([imgMin]));
gulp.watch([paths.html.src, paths.scripts.src, paths.scss.src]).on('change', browserSync.reload);
}
/*******************
* Gulp Tasks
*******************/
const serveTasks = gulp.series([injectSrcAssets, serve]);
const buildTasks = gulp.series([clean, copyHTML, copyFonts, concatJS, minifyJS, compileSCSS, concatCSS, minifyCSS, injectDistAssets, imgMin, extractCriticalCSS]);
exports.default = serveTasks;
exports.build = buildTasks;
// function CSSBuild() {
// let uncssOptions = {
// html: ['dist/*.html'],
// };
// return gulp
// .src('src/css/bootstrap.min.css')
// .pipe(plugins.postcss([
// require('autoprefixer'),
// require('cssnano'),
// ]))
// .pipe(plugins.uncss(uncssOptions))
// .on('error', function (err) {
// log.error(err.message);
// })
// .pipe(gulp.dest('dist/'));
// }
{
"name": "personal_gulp_build",
"version": "0.0.1",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"kodeeo"
],
"author": "Zahidul Hossain",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"autoprefixer": "^9.7.4",
"browser-sync": "^2.26.7",
"child_process": "^1.0.2",
"critical": "^1.3.9",
"cssnano": "^4.1.10",
"del": "^4.1.1",
"fancy-log": "^1.3.3",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-changed": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^6.2.0",
"gulp-inject": "^5.0.5",
"gulp-line-ending-corrector": "^1.0.3",
"gulp-load-plugins": "^2.0.2",
"gulp-postcss": "^8.0.0",
"gulp-purgecss": "^2.0.5",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-size": "^3.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-uncss": "^1.0.6",
"imagemin-mozjpeg": "^8.0.0",
"postcss-assets": "^5.0.0",
"postcss-uncss": "^0.17.0",
"stream-series": "^0.1.1",
"uncss": "^0.17.2"
},
"dependencies": {
"gulp-htmlmin": "^5.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment