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: