This article will be split in two distinct parts: the first will be more “theoretical” and will explain the main principles of Gulp and Grunt, as well as what I prefer to use; in the second, we will show you how to build a boilerplate for your project (in both way).

As front-end developers, we are often faced in our daily work with recurring and time consuming tasks. For the sake of efficiency and comfort of work, we have listed a few things that could improve the workflow of our team:

• Fast and automated creation of a common working environment.
• Automation of tasks such as image compression, JS files concatenation or SASS files compilation.

To meet these needs, two tools are in competition: Grunt and Gulp.

Grunt and Gulp are two task runners that automate most tasks (compilation, test creation,…), saving time and helping us to focus on the essential: development.

Ultimately, Grunt and Gulp do exactly the same job. The communities around the two systems are quite large and modules can be found fairly easily for each of the two systems. What differentiates the two is their mode of operation.

Grunt

Grunt works on the principle of “per plugins” configuration. This means that each plugin must be independently configured and used in tasks. Here’s how a plugin is configured, with options, a source and sometimes a destination file:

sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/assets/css/main.css': 'src/styles/main.scss',
}
}
},

autoprefixer: {
dist: {
options: {
browsers: [
'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
]
},
src: 'dist/assets/css/main.css',
dest: 'dist/assets/css/main.css'
}
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

This methodology allows to configure plugins, then inject them into tasks.

The advantage is that each plug-in is independent of the others.

The downside is manipulating files between tasks. If you plan a series of tasks via plug-ins, this means that the files will be handled as many times as the number of defined tasks.

Gulp

Gulp, meanwhile, works on the principle of “per tasks” configuration. The big difference is that here we will configure and inject all the plugins we need within the task configuration:

gulp.task('sass', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'compressed' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6',
'android 4'))
.pipe(gulp.dest('dist/assets/css'))
}); |

The situation here is quite different: the different desired plugins are injected into the “pipe”.

The advantage of Gulp is that the file does not pass from one task to another, but is transformed once. This prevents handling the final files multiple times. It also use the powerful NodeJS Stream (see at the end of this article for Stream)

The disadvantage is that the same configuration for a task can be repeated multiple times. (If we take care of the HTML files in a different way, it is possible to have re-write the same code in multiple places)

Conclusion

Both technologies meet our needs, with the same result. The big difference is their functional approach. You may prefer to configure the entire plugins and add tasks or conversely, create jobs and inject plugins.

Next week we will dive deeper in these two technologies, with more specific examples. So stay tuned!

Here are some good articles about streams:

• https://github.com/substack/stream-handbook