Grunt Vs Gulp – Javascript front end Build Tools
As you know, both grunt and gulp are tools used in the front-end development to build the javascript projects. Each tool has its own syntax and guidelines but at the end their main goal is to create the build for the javascript project. After spending much time on grunt and gulp, I decided to go with gulp as my front-end development build tools because of various reasons. I noticed that the gulp is doing build tasks much faster and elegant than grunt. So I recommend to go with gulp because of the following reasons:
Syntax is Elegant:
While comparing the syntax of gruntfile.js vs gulpfile.js, I find the the syntax of gulpfile.js is so meaningful, elegant, structured and organised. This helps to understand me the syntax of coding easily, especially for the newbies and also for those who worked on node.js environment.
Example: Let’s say we have multiple of sass files which needs to be converted into css files with ‘sass’ plugin and once converted to css files we want run ‘autoprefixer’(parses css and adds vendored css properties ex: moz-border-radius). These 2 tasks should run whenever I change any of my css files.
We can achieve the above tasks using grunt and gulp by writing:
gruntfile.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
grunt.initConfig({
sass: {
build: {
files: [{
cwd: ‘app/styles’,
src: ‘**/*.scss’,
dest: ‘.tmp/styles’,
expand: true,
ext: ‘.css’
}]
}
},
autoprefixer: {
options: [‘last 2 version’],
build: {
files: [{
expand: true,
cwd: ‘.tmp/styles’,
src: ‘{,*/}*.css’,
dest: ‘build/styles’
}]
}
},
watch: {
styles: {
files: [‘app/styles/{,*/}*.scss’],
tasks: [‘sass:build’, ‘autoprefixer:build’]
}
}
});grunt.registerTask(‘default’, [‘styles’, ‘watch’]);
|
gulpfile.js
|
1
2
3
4
5
6
7
8
9
10
11
12
|
gulp.task(‘sass’, function() {
gulp.src(‘app/styles/**/*.scss’)
.pipe(sass())
.pipe(autoprefixer(‘last 2 version’))
.pipe(gulp.dest(‘build/styles’));
});
gulp.task(‘default’, function() {
gulp.run(‘sass’);
gulp.watch(‘app/styles/**/*.scss’, function() {
gulp.run(‘sass’);
});
});
|
Well when you compare the above 2 files, you will find how elegant and structured the gulp file is. Also the number of lines involved is half to that of grunt file.
Pipeline Streaming:
This is what I love from gulp which is missing in grunt. In gulp you input all your source files and pipe them through a bunch of plugins and get the output at the other end. Whereas in grunt, you should configure each plugin with input and output which is a big headache. So through pipeline streaming the output of the each task is given as an input to the following task and as a result no need to create .tmp files which are creating during grunt build.
Speed and Performance:
When running both grunt and gulp for the same task, I find the speed and performance of gulp is better than grunt. Thanks to Zander Martineau for sharing an article which has the information on speed test between gulp vs grunt. He performed speed test on javascript – concat and uglify, sass compilation and reported that gulp is much ahead of grunt in speed.
Inbuilt Watch Plugin:
Watch plugin is inbuilt in gulp but whereas it is not incase of grunt so you need to install watch-plugin to run watch tasks.
The only cons I found with gulp is since it is new, it lacks support forums. But this could change in few months. As more developers are finding the importance of gulp, they do start contributing it and you will see more forums and support soon for gulp. Hope this post helps you, if I miss anything share with me in comments.
