Think about a typical project today. We usually involve a lot of tools and third-party languages likes Typescript, CoffeeScript, Sass, Less that we have to run compiler to compile them to Javascript and Css. We also need to run some tasks like: minify Css/Javascript, run unit test, setup development server, concentrate scripts… Because these tasks are repeated frequently, if we do these tasks manually, we will waste a lot of time. That’s why we need build tools to automate these tasks for us.
Build tools aren’t new kids on block, developers already use them from the very beginning of web development. Those famous tools are Phing, Ant, Makefile… But about Javascript-based build tools, the most popular are Grunt and Gulp. If you are a new Javascript developer, chance that you have to struggle to choose the best tools. Let’s reveal some insight for these two build tools:
Grunt
Grunt is introduced on 2012 is it’s one of the first Javascript build tool. Grunt favors configuration and a Gruntfile – the Grunt’s task definition file – is made from a JSON-like file. Some of very popular projects which are using Grunt are: jQuery, Bootstrap, WordPress, Ghost. Below is an example of a Gruntfile:
[javascript]
grunt.initConfig({
clean: {
src: [‘build/app.js’, ‘build/vendor.js’]
},
copy: {
files: [{
src: ‘build/app.js’,
dest: ‘build/dist/app.js’
}]
}
concat: {
‘build/app.js’: [‘build/vendors.js’, ‘build/app.js’]
}
// … other task configurations …
});
grunt.registerTask(‘build’, [‘clean’, ‘bower’, ‘browserify’, ‘concat’, ‘copy’]);
[/javascript]
Because of simple configuration, Grunt is very easy to use, it’s adopted by many developer.
Gulp
Gulp on the opposite, favors code over configuration. Gulp use Node’s Stream API which is faster. As a Javascript developer, I feel that Gulp approach is suitable for me. Since Gulp is introduced, many big projects has switch Gulp, for example: Ionic, Yeomen. Let’s see an example of a Gulpfile:
[javascript]
var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var minifyCss = require(‘gulp-minify-css’);
var rename = require(‘gulp-rename’);
//declare the task
gulp.task(‘sass’, function(done) {
gulp.src(‘./scss/ionic.app.scss’)
.pipe(sass())
.pipe(gulp.dest(‘./www/css/’))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: ‘.min.css’ }))
.pipe(gulp.dest(‘./www/css/’))
.on(‘end’, done);
});
[/javascript]
A Gulpfile is also a NodeJS script. Because it uses Stream api, we only need to define source files once and after that we pipe next tasks in sequence. Look back at the Gruntfile example, you can notice that it’s required us to declare source and destination files for each task, so it take more time to define a Gruntfile.
The interesting part is each Gulp plugin is also a Node module which we can reuse in our Node application.
What are the best tools ?
When choose a tools for a new project. We have to take the following options into considerations, they are:
- Stability
- Community
- Performance
- Usability
About stability, both Gulp and Grunt are battle tested in many big projects so we can trust them.
We only use them at development phase so they are good as long as their performance is acceptable, it’s hard to notice the speed different between these tools too.
Both of Gulp and Grunt have large community. Actually, Grunt community is bigger but Gulp community is growing fast. Gulp and Grunt have plugins that can do same tasks. Beside that a lot of their plugins are just wrapper for a node module.
The only really different are usability. As a long time Javascript/Nodejs developer, I prefer Gulp over Grunt because I like their coding approach. I have known Grunt for a long time but I never has a strong feeling for it. I use Gulp in most of my project. I think Grunt is suitable for amateur developers, designers.
What do you think ? Discuss with me at the comment section.