Skip to content

Instantly share code, notes, and snippets.

@cijagani
Last active December 26, 2019 03:18
Show Gist options
  • Save cijagani/3ebeb72634aca6399398870c52472d34 to your computer and use it in GitHub Desktop.
Save cijagani/3ebeb72634aca6399398870c52472d34 to your computer and use it in GitHub Desktop.
minify css and js and compress images
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'
);
});
{
"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