Skip to content

Instantly share code, notes, and snippets.

@mikedugan
Created June 23, 2014 01:44
Show Gist options
  • Save mikedugan/9bff21933aadb08e2aaa to your computer and use it in GitHub Desktop.
Save mikedugan/9bff21933aadb08e2aaa to your computer and use it in GitHub Desktop.
Basic gulpfile setup to minify images, LESS/CSS, and JS
var gulp = require('gulp');
var rimraf = require('rimraf');
var less = require('gulp-less');
var concat = require('gulp-concat');
var prefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-minify-css');
var jsmin = require('gulp-uglify');
var watch = require('gulp-watch');
var util = require('gulp-util');
var rename = require('gulp-rename');
var imgmin = require('gulp-imagemin');
var optipng = require('imagemin-optipng');
var jpgtran = require('imagemin-jpegtran');
var svgo = require('imagemin-svgo');
var dist_js_name = 'script.min.js';
var dist_css_base = 'styles.min';
var paths = {
js: 'public/js/',
images: 'public/images/',
styles: 'public/styles/',
dist: 'public/dist/'
}
var files = {
js: paths.js + '**/*.js',
images: paths.images + '**/*',
css: paths.styles + '**/*.css',
less: paths.styles + '**/*.less',
png: paths.images + '**/*.png',
jpg: paths.images + '**/*.jpg',
svg: paths.images + '**/*.svg'
}
gulp.task('default', ['clean', 'jsmin', 'imgmin', 'less-min']);
gulp.task('imgmin', ['jpgmin', 'pngmin', 'svgmin']);
gulp.task('watch', function() {
gulp.src(files.less)
.pipe(watch(function(files) {
gulp.src(paths.styles + 'bootstrap.less').pipe(less())
.pipe(prefixer("last 2 versions", "ie 10", "ie 9", "ie 11"))
.pipe(cssmin({keepBreaks: false}))
.pipe(gulp.dest(paths.dist)
)
}));
})
gulp.task('clean', function(cb) {
rimraf(paths.dist, cb)
});
gulp.task('jsmin', function() {
gulp.src(files.js)
.pipe(concat(dist_js_name))
.pipe(jsmin())
.pipe(gulp.dest(paths.dist))
});
gulp.task('less-compile', function() {
gulp.src(paths.styles + 'bootstrap.less')
.pipe(less())
.pipe(rename({
basename: 'styles',
extname: '.less'
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('less-min', function(){
return gulp.src(paths.styles + 'bootstrap.less')
.pipe(less())
.pipe(prefixer("last 2 versions", "ie 10", "ie 9", "ie 11"))
.pipe(cssmin({keepBreaks: false}))
.pipe(rename({
basename: dist_css_base,
extname: '.css'
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('pngmin', function() {
gulp.src(files.png)
.pipe(imgmin({
use: [optipng({optimizationLevel:3})]
}))
.pipe(gulp.dest(paths.dist + 'images'))
});
gulp.task('jpgmin', function() {
gulp.src(files.jpg)
.pipe(imgmin({
progressive: true,
use: [jpgtran()]
}))
.pipe(gulp.dest(paths.dist + 'images'))
});
gulp.task('svgmin', function() {
gulp.src(files.svg)
.pipe(gulp.dest(paths.dist + 'images/glyphicons'))
});
sudo apt-get install nodejs npm
sudo npm install -g gulp
npm install --save-dev rimraf gulp-less gulp-concat gulp-autoprefixer gulp-minify-css gulp-uglify gulp-watch gulp-util gulp-rename gulp-imagemin imagemin-optipng imagemin-jpegtran imagemin-svgo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment