Last active
December 26, 2019 03:18
-
-
Save cijagani/3ebeb72634aca6399398870c52472d34 to your computer and use it in GitHub Desktop.
minify css and js and compress images
This file contains 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
let gulp = require('gulp'); | |
let concat = require('gulp-concat');// file name concatination | |
let autoprefixer = require('gulp-autoprefixer'); | |
let cleanCSS = require('gulp-clean-css'); //to clean css | |
let sourcemaps = require('gulp-sourcemaps');// for sourcemap | |
let minifyCSS = require('gulp-minify-css'); //minify css | |
let rename = require('gulp-rename'); //file rename | |
let sass = require('gulp-sass'); //sass to css | |
let del = require('del'); // to clean folders | |
let browserSync = require('browser-sync'); | |
let reload = browserSync.reload; | |
let imageMin = require('gulp-imagemin'); | |
let notify = require('gulp-notify'); | |
let plumber = require('gulp-plumber'); | |
//let uglify = require('gulp-uglify'); | |
let uglify = require('gulp-uglify-es').default | |
let destination ="./build/"; | |
let css_destination="./build/css/"; | |
let js_destination="./build/js/"; | |
let image_destination="./build/images/"; | |
// Set the browser that you want to support | |
const AUTOPREFIXER_BROWSERS = [ | |
'ie >= 10', | |
'ie_mob >= 10', | |
'ff >= 30', | |
'chrome >= 34', | |
'safari >= 7', | |
'opera >= 23', | |
'ios >= 7', | |
'android >= 4.4', | |
'bb >= 10' | |
]; | |
gulp.task('bs', function() { | |
browserSync.init({ | |
//proxy: 'http://localhost' | |
}); | |
}); | |
gulp.task('minify-js', function(){ | |
//gulp.src('./public/assets/js/**/*') | |
gulp.src(['./public/assets/js/waypoints.js', | |
'./public/assets/js/jquery.counterup.min.js', | |
'./public/assets/js/jquery.scrolly.js', | |
'./public/assets/js/magnific-popup.min.js', | |
'./public/assets/js/isotope.min.js', | |
'./public/assets/js/images-loded.min.js', | |
'./public/assets/js/owl.carousel.min.js']) | |
.pipe(concat('script.js')) | |
.pipe(uglify()) | |
.pipe(gulp.dest(js_destination)); | |
}); | |
gulp.task('minify-css', () => { | |
return gulp.src('./public/assets/css/**/*.css') | |
// Auto-prefix css styles for cross browser compatibility | |
.pipe(autoprefixer({browsers: AUTOPREFIXER_BROWSERS})) | |
//sourcemap file initialization | |
.pipe(sourcemaps.init({loadMaps: true})) | |
//clean all css file one by one | |
.pipe(cleanCSS({debug: true}, (details) => { | |
console.log(`>>============ ${details.name} : ${details.stats.originalSize} =======>>`); | |
console.log(`>>============ ${details.name} : ${details.stats.minifiedSize} =======>>`); | |
})) | |
// write sourcemap file | |
.pipe(sourcemaps.write()) | |
//minify css files | |
.pipe(minifyCSS({keepBreaks: true})) | |
//add min suffix in each file name | |
.pipe(rename({suffix: '.min'})) | |
//place all files in destination folder | |
.pipe(gulp.dest(css_destination)); | |
}); | |
gulp.task('styles', function() { | |
return gulp.src('./sass/**/*.scss') | |
.pipe(plumber({ | |
errorHandler: notify.onError("Error: <%= error.message %>") | |
})) | |
.pipe(sourcemaps.init()) | |
.pipe(sass()) | |
.pipe(minifyCSS()) | |
.pipe(concat('style.css')) | |
.pipe(autoprefixer('last 5 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1')) | |
.pipe(sourcemaps.write('.')) | |
.pipe(gulp.dest('./')) | |
.pipe(reload({ stream: true })); | |
}); | |
gulp.task('scripts', function () { | |
return gulp.src('./js/scripts.js') | |
.pipe(plumber({ | |
errorHandler: notify.onError("Error: <%= error.message %>") | |
})) | |
.pipe(concat('main.min.js')) | |
.pipe(uglify()) | |
.pipe(gulp.dest('./js')) | |
.pipe(reload({stream:true})); | |
}); | |
gulp.task('minify-image', function () { | |
//images source location | |
return gulp.src('./uploads/**/*') | |
//image-minify start here | |
.pipe(imageMin([ | |
//gif minify | |
imageMin.gifsicle({interlaced: true}), | |
//jpg minify | |
imageMin.jpegtran({progressive: true}), | |
//png minify | |
imageMin.optipng({optimizationLevel: 5}), | |
//svg minify | |
imageMin.svgo({ | |
plugins: [ | |
{removeViewBox: true}, | |
{cleanupIDs: false} | |
] | |
}) | |
// print output in console | |
],{verbose: true})) | |
//place all files in destination folder | |
.pipe(gulp.dest('./build/images/')); | |
}); | |
gulp.task('pack-css', function () { | |
// gulp.start('clean'); | |
gulp.start('minify-css'); | |
return gulp.src(css_destination+'/**/*.css') | |
.pipe(minifyCSS()) | |
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9')) | |
.pipe(concat('app.css')) | |
.pipe(gulp.dest(css_destination+'/packed/')); | |
}); | |
gulp.task('pack-js', function () { | |
gulp.start('minify-js'); | |
}); | |
//gulp.src('src/css/**/*.css') | |
// .pipe(minifyCSS()) | |
// .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9')) | |
// .pipe(concat('style.min.css')) | |
// .pipe(gulp.dest('dist/css')) | |
// Clean output directory | |
gulp.task('clean', () => del([destination])); | |
// configure which files to watch and what tasks to use on file changes | |
gulp.task('watch', function() { | |
gulp.watch('sass/**/*.scss', ['styles']); | |
gulp.watch('./js/**/*.js', ['scripts']); | |
gulp.watch('./**/*.php', reload); | |
}); | |
gulp.task('default', ['styles', 'scripts', 'images', 'bs', 'watch']); | |
// Gulp task to minify all files | |
gulp.task('default', ['clean'], function () { | |
runSequence( | |
'minify-css', | |
'minify-js', | |
'minify-image' | |
); | |
}); |
This file contains 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
{ | |
"name": "site-optimizer", | |
"version": "1.0.0", | |
"description": "minify styles, scripts and images", | |
"main": "gulpfile.js", | |
"scripts": { | |
"test": "default" | |
}, | |
"author": "chirag jagani", | |
"license": "ISC", | |
"dependencies": { | |
"browser-sync": "^2.24.7", | |
"del": "^3.0.0", | |
"gulp": "^3.9.1", | |
"gulp-autoprefixer": "^6.0.0", | |
"gulp-concat": "^2.6.1", | |
"gulp-imagemin": "^4.1.0", | |
"gulp-minify-css": "^1.2.4", | |
"gulp-notify": "^3.2.0", | |
"gulp-plumber": "^1.2.0", | |
"gulp-sass": "^4.0.1", | |
"gulp-sourcemaps": "^2.6.4", | |
"gulp-uglify": "^3.0.1", | |
"gulp-uglify-es": "^1.0.4" | |
}, | |
"devDependencies": { | |
"gulp-clean-css": "^3.10.0" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment