Skip to content

Instantly share code, notes, and snippets.

@LoyEgor
Last active March 18, 2021 07:28
Show Gist options
  • Save LoyEgor/a892e0680b5754a34b947fe3b1bb9671 to your computer and use it in GitHub Desktop.
Save LoyEgor/a892e0680b5754a34b947fe3b1bb9671 to your computer and use it in GitHub Desktop.
gulp-less + cust-error-msg + browserSync + compress {js,css,img,html}
//install
// npm i gulp-autoprefixer browser-sync gulp-cache gulp-clean-css gulp-concat del gulp gulp-if gulp-util gulp-htmlmin gulp-imagemin imagemin-giflossy imagemin-mozjpeg imagemin-pngquant imagemin-zopfli gulp-less gulp-notify gulp-plumber gulp-replace gulp-sourcemaps gulp-uglify -f
// node node_modules/jpegtran-bin/lib/install.js
// node node_modules/gifsicle/lib/install.js
// node node_modules/zopflipng-bin/lib/install.js
// node node_modules/mozjpeg/lib/install.js
// node node_modules/giflossy/lib/install.js
// node node_modules/pngquant-bin/lib/install.js
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var cache = require('gulp-cache');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var htmlmin = require('gulp-htmlmin');
var imagemin = require('gulp-imagemin');
var imageminGiflossy = require('imagemin-giflossy');
var imageminMozjpeg = require('imagemin-mozjpeg'); //need to run 'brew install libpng'
var imageminPngquant = require('imagemin-pngquant');
var imageminZopfli = require('imagemin-zopfli');
var less = require('gulp-less');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var replace = require('gulp-replace');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
//compile less, create sourcemaps and refresh browsers
gulp.task('less', function() {
//report error
var reportError = function(error) {
var report = '\n';
var chalk = gutil.colors.white.bgRed;
if (error.plugin) {
report += chalk('PLUGIN:') + ' [' + error.plugin + ']\n';
}
if (error.message) {
report += chalk('ERROR:\040') + ' ' + error.message + '\n';
}
console.error(report);
if (error.line && error.column) {
var notifyMessage = 'LINE ' + error.line + ':' + error.column;
} else {
var notifyMessage = '';
}
notify({
title: 'FAIL: ' + error.plugin,
message: notifyMessage,
sound: 'Beep'
}).write(error);
gutil.beep();
this.emit('end');
}
//less, sourcemaps and refresh
return gulp.src('app/assets/less/**/*.less')
//custom error gist NEEDED
.pipe(plumber({
errorHandler: reportError
}))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(autoprefixer())
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('app/assets/css'))
.pipe(browserSync.stream());
});
//browserSync settings
gulp.task('serve', function() {
browserSync.init({
browser: "google chrome",
server: 'app',
notify: true
});
});
// concat and clean js
gulp.task('compress:js', function() {
return gulp.src('./app/assets/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'));
});
// concat, clean and remove unused css
gulp.task('compress:css', function() {
return gulp.src('app/assets/css/**/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('dist/assets/css'));
});
//compress all images
gulp.task('compress:img', function() {
return gulp.src('app/assets/img/**/*.{gif,png,jpg,svg}', {
base: 'app'
})
.pipe(cache(imagemin([
//png
imageminPngquant({
speed: 1,
quality: [0.95, 1] //lossy settings
}),
imageminZopfli({
more: true
// iterations: 50 // very slow but more effective
}),
//gif
// imagemin.gifsicle({
// interlaced: true,
// optimizationLevel: 3
// }),
//gif very light lossy, use only one of gifsicle or Giflossy
imageminGiflossy({
optimizationLevel: 3,
optimize: 3, //keep-empty: Preserve empty transparent frames
lossy: 2
}),
//svg
imagemin.svgo({
plugins: [{
removeViewBox: false
}]
}),
//jpg lossless
imagemin.jpegtran({
progressive: true
}),
//jpg very light lossy, use vs jpegtran
imageminMozjpeg({
quality: 90
})
])))
.pipe(gulp.dest('dist'));
});
//compress html
gulp.task('compress:html', function() {
return gulp.src('app/**/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
conservativeCollapse: true, //work with collapseWhitespace and save at least 1 space inside teg
preserveLineBreaks: false, //make line break if collapseWhitespace true
collapseBooleanAttributes: true, //<input disabled="disabled"> to <input disabled>. problem in cases when css looks like: input[disabled="disabled"] { color: green }
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
//removeAttributeQuotes: true, //remove "" and it may be too much
removeComments: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true, //default attribute name-value get stripped. Example: <input type="text" /> convert to <input/> so css input[type="text"] won't work
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortAttributes: true, //improve gzip compression
sortClassName: true, //improve gzip compression
useShortDoctype: true
}))
//remove empty line from compressed html
.pipe(replace(/^\s*\r?\n/gm, ''))
.pipe(gulp.dest('dist'));
});
gulp.task('removedist', function() {
return del('dist');
});
//watch settings
gulp.task('watch', gulp.parallel('serve', 'less', function() {
gulp.watch('app/assets/less/*.less', gulp.series('less'));
browserSync.watch('app/**/*.{js,html}').on('change', browserSync.reload);
}));
//set default task
gulp.task('default', gulp.series('watch'));
//build
gulp.task('build',
gulp.series('removedist', 'less', gulp.parallel('compress:js', 'compress:css', 'compress:img', 'compress:html'),
function() {
var fonts = gulp.src('app/assets/fonts/**/*', {
base: 'app'
}).pipe(gulp.dest('dist'));
var favicon = gulp.src('app/assets/favicon/**/*', {
base: 'app'
}).pipe(gulp.dest('dist'));
var libs = gulp.src('app/assets/libs/**/*', {
base: 'app'
}).pipe(gulp.dest('dist'));
var htaccess = gulp.src('app/.htaccess', {
base: 'app'
}).pipe(gulp.dest('dist'));
return fonts, favicon, libs, htaccess;
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment