Before we get into discussing gulp, we should understand what a 'task runner' is.
What is a Task Runner?
Task runners are tiny applications that are used to automate many time consuming, tedious tasks that you have to do while developing a project. These include tasks such as image compression, running tests, concatenating files, minification, CSS preprocessing. By creating a task file, you can instruct the task runner to automatically take care of just about any development task you can think of as you make changes to your files. It’s a very simple idea that will save you a lot of time and allow you to stay focused on development.
What's so different about gulp?
Streamlined!
Gulp is a streaming build system. You can find detailed explaination here
Plugins
There are a lot of plugins for grunt but gulp plugins are coming up faster. So we can expect a bunch useful of plugins in the near future.
User friendly
In my experience, I have found that gulp has readable code. It's short, simple and easy to write.
A grunt file to minify js
module.exports = function(grunt) {
grunt.initConfig({
concat: {
'dist/all.js': ['src/.js']
},
uglify: {
'dist/all.min.js': ['dist/all.js']
},
jshint: {
files: ['gruntfile.js', 'src/.js']
},
watch: {
files: ['gruntfile.js', 'src/*.js'],
tasks: ['jshint', 'concat', 'uglify']
}
});
// Load Our Plugins
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register Default Task
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
A gulp file to minify js
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
// Lint JS
gulp.task('lint', function() {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Concat & Minify JS
gulp.task('minify', function(){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
// Watch Our Files
gulp.task('watch', function() {
gulp.watch('src/*.js', ['lint', 'minify']);
});
// Default
gulp.task('default', ['lint', 'minify', 'watch']);
I have been using Gulp for many of the automation jobs while developing websites. I have found gulp to be user friendly. Do not do a task again and again, use a task runner that does the job while you can concentrate on actual development.
Posted Sunday 2 November 2014 by @sharathdt Share
- You might also like: