read

To kick this off, let’s first define a Javascript task runner. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, uglifying, etc, the easier your job becomes. After you’ve configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Grunt and Gulp are both a node.js modules, you can install them using the npm:

1
sudo npm install -g Grunt
1
sudo npm install -g Gulp

Code Not Config:
when writing the Orchestra for the task runners, using Grunt you will end up writing a configuration file. On the other hand if you use Gulp, you will be writing a clean javascript code. In my opinion it make sens to write code as a web developer, in addition Gulp API is very clean and the code is humain readable. Grunt files are more of a pain to read compared to Gulp.

Plugins
When it comes to extending functionality, it is gulp’s belief that each plugin should only perform a single action. Gulp is simply there to connect and organize them. There is no shared purpose with other plugins or core features. This is what makes the Gulp API very clean. Still Grunt get this point since it has more plugins available and more stability on this matter.

Streaming
Gulp is a streaming build system, taking advantage of node.js’s streams. To put it simply, streaming gives you more control over your flow and relieves you of temporary folders and files. With gulp, the input is a file and the output too. In this category, Gulp is more fast running the tasks than Grunt since it uses memory instead of straight I/O operations.

Examples:
Here is 2 examples for both of the task runners :

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
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']);
};

Gulpfile.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var gulp = require('gulp'),
livereload = require('gulp-livereload'),
useref = require('gulp-useref'),
filter = require('gulp-filter'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
/*jsValidate = require('gulp-jsvalidate'),*/
imagemin = require('gulp-imagemin'),
clean = require('gulp-clean'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch');

//uglify and minify the js files
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');

return gulp.src('index.html')
.pipe(useref.assets())
.pipe(plumber())
.pipe(jsFilter)
.pipe(uglify({mangle: false})) //to protect angular.js lib from corruption
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(cssFilter.restore())
.pipe(useref.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});

//minify the images
gulp.task('img', function () {
return gulp.src('img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('dist'));
});

//clean dist
gulp.task('clean', function(){
//don't read the files, just delet them
return gulp.src('dist', {read: false}).pipe(clean());
})

//default task
gulp.task('default', ['clean', 'img', 'html'], function(){

})

//watch for livereload
gulp.task('watch', function(){
livereload: {port: 35728}
var server = livereload();

gulp.watch(['js/*.js', '*.html', 'style/*.css']).on('change',
function(event){
server.changed(event.path);
})
})

Conclusion:
This is really a personal preference, Grunt is great doing Javascript task manager, still it lack some features and it is very different from writing javascript, on the other hand writing tasks for Gulp is like writing Node.js code ! Also Glup is not as mature as Grunt, but that won’t take much time since Gulp is making it’s way up !

Nouri


Published on

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

E-Nouri

Full Stack Cloudiologist Mind

Back to Home