Getting Started with gulp
Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass files, uglify and compress js files and much more. The kicker for gulp is that its a streaming build system which doesn't write temp files. It's like Pipes in bash.
Installing gulp
Before We configure tasks, we need to install gulp globally and as a dev dependency. use following command to install gulp globally
$ npm install gulp -g
after installing gulp globally you can access CLI now we will need to install gulp locally.
cd into project and run following command to install gulp as a dev dependency
$ npm install gulp —save-dev
this command install gulp locally and add it to package.json file as a devdependencies
Installing Gulp Plugins
after installing the gulp globally and as a dev dependency we need to install gulp plugins which will do a specific task
Sass compile (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
Minify CSS (gulp-cssnano)
JSHint (gulp-jshint)
Concatenation (gulp-concat)
Uglify (gulp-uglify)
Compress images (gulp-imagemin)
LiveReload (gulp-livereload)
Caching of images so only changed images are compressed (gulp-cache)
Notify of changes (gulp-notify)
Clean files for a clean build (del)
we can install all this plugin using npm
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
this will install all the gulp plugins and add it to package.son as devedependencies
Load plugins and creating tasks
We need to crate a glupfile.js in project directory and than load all the plugins in gulp file.js. like
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require(‘del');
We will use gulp.task API to create tasks.
gulp.task('styles', function() { ... )};
the about task styles can run from terminal using
$ gulp styles
Compile Sass, Autoprefix and minify
Firstly we will create a task for SASS compiling. this task will sass run it through Autoprefixer and save it to our destination with minified version. when the task is finished this will auto-refresh the page and notify that the task is completed
gulp.task('styles', function() {
return sass('src/styles/main.scss', { style: 'expanded' })
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
});
JSHint, concat, and minify JavaScript
now we will setup a script task to lint, concat and uglify JS files and create a min file
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
});
Here we use the gulp.src API to specify our input files.
Compress Images
We will create next gulp task to compressing images. this task will take any source image and run them through image min plugin and compress image and save them to targeted folder
Clean UP
Its a good idea to clean out the destination folders and rebuild the files when deploying, so all the files will be upto date. here is the gulp task for cleanup
gulp.task('clean', function() {
return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']);
});
});
Default Task
We have already defined all the tasks and we can run each task in terminal using gulp task name
but if we want than we can create a default task which can ran by using gulp command
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
the above code clean task will run before the tasks in gulp.start.
Watch
we use watch to watch files and perform necessary tasks. to watch files we have to create new task with gulp.watch API which will watch files.
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
});
LiveReload
Live reload will auto-refresh page on file change. we just need to modify our gulp task watch to conferring the live reload server
gulp.task('watch', function() {
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
at the end we need to put all the above code together
/*!
* gulp
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return sass('src/styles/main.scss', { style: 'expanded' })
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task('clean', function() {
return del(['dist/styles', 'dist/scripts', 'dist/images']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
});
