Grunt vs Gulp

Grunt vs Gulp

Although Gulp has been out for a long time, but has not been used. Thanks to the recent project needs, try it out, here are a few points to talk about the differences between the use of grunt and gulp, focusing on the problems found during the use of gulp. The best of both tools is the reader's own judgment.

1. How to Write

Grunt use the idea of configuration to write packaging scripts, everything is configured, so there will be more configuration items, such as option,src,dest and so on. and different plug-ins may have their own extension fields, resulting in increased cognitive costs, when used to understand the various plug-in configuration rules.
Gulp is the code to write the package script, and the code uses the flow of writing, only abstract out the GULP.SRC, Gulp.pipe, Gulp.dest, Gulp.watch interface, the use is quite simple. By trial, the amount of code used gulp can be about half as much as grunt.

2. Task Partitioning

Each task in the grunt corresponds to a single outermost configuration key, and a large task can contain small tasks that exist in a tree structure. Give me a chestnut:

Uglify: {    one: {        src' src/a.js', dest' Dest/a.min.js'}, both: {src' tmp/b.js ', dest' Dist/b.min.js'}}          

The benefit of dividing uglify into subtasks is that we can call ' uglify:one ' or ' uglify:two ' separately when encapsulating different tasks, which is useful for some tasks that need to be called to uglify at different points in time.

There is no concept of subtasks in gulp, which can only be accomplished by registering two tasks for the above requirements

Gulp.Task' Uglify:onefunction () {gulp. SRC ( ' Src/a.js ").  Pipe (uglify ()).  Dest ( ' Dest/a.min.js Gulp. task ( ' Uglify:two ", function () {gulp. SRC ( ' Tmp/b.js ").  Pipe (uglify ()).  Dest ( ' Dist/b.min.js      

Of course, this requirement can often be optimized by adjusting the packaging strategy, which does not require the decomposition of sub-tasks, which can be solved in special cases.

3. Operating efficiency

Grunt performs tasks in a serial manner, such as when we register for such a task:
grunt.register(‘default‘, [‘concat‘, ‘uglify‘, ‘release‘])
Grunt is in the order of writing first executed Cancat, then uglify, and finally the release, a harmonious atmosphere, no one to provoke anyone. And we know that certain operations can be performed synchronously, such as Cssmin and UGLIFYJS. At this point, grunt cannot easily change the configuration to achieve the effect of parallel execution, usually by manually writing asynchronous tasks, for example, a chestnut:

Grunt. registertask (' cssmin' async cssmin Task this.  Cssmin (done);});    

The Done method informs the program after the cssmin operation is complete, but this requires plug-in support.

Gulp based on the idea of parallel execution of tasks, we look at this code by using a pipe method to process the packaging tasks in a data flow way:

 gulp. Task ( ' Jsmin "function () {gulp. src ([ ' Build/js/**/*.js]). Span class= "Pl-en" >pipe (concat ( ' App.min.jspipe (uglify ().  Pipe (gulp. Dest ( ' Dist/js/      

The program first build/js compresses the next JS file into app.min.js , then uglify operation, and finally placed under DIST/JS. This series of work is done in a task, and no temporary files are produced in the middle. If we use grunt, how do we need to write this task? That must be a two task configuration, a concat, a uglify, and a temporary file must be generated in the middle. From this point of view, the generation of Gulp in intermediate files is generated only in memory and does not generate extra IO operations.
Take a look at the previous question, how do uglify and cssmin be executed in parallel? In fact, the gulp itself is concurrent execution, we do not need more than what extra work, just

gulp.task(‘default‘, [‘uglify‘, ‘cssmin‘]);

Gulp how fast how to come, and will not wait until uglify to execute cssmin.
Do you think gulp second kill grunt a few streets? Wait, the pit is still in the back.
First, we need to ask a question, why use concurrency?
For quick? When can it be fast, and when?
Let's say we have a task like this:

Gulp. task (' Jsmin', [' Clean' concat']);     

The folder needs to be emptied before merging compression, according to the gulp of the concurrent execution, the two tasks will be executed simultaneously, although from the command is executed clean and then execute concat, but clean is not finished, Concat executed, causing the code to merge some files that have not been cleaned up, This is obviously not the result we want.
Is there any solution to this problem?
The Gulp official API gives you this approach:

• Give a hint to tell the task when execution is complete
• And give a hint to tell one task to rely on the completion of another task

The official cited this example:
Let's assume that you have two tasks, "one" and "two", and you want them to execute in this order:
1. In "One", you add a hint to tell when it will complete: You can return a callback when you are finished, or return a promise or stream, so the system waits for it to complete.
2. In "Two", you need to add a hint to tell the system that it needs to rely on the first task to complete.

So the actual code for this example would be this:

Var Gulp=Require' Gulp‘);Returns a callback, so the system can know when it's doneGulp.Task' Onefunction (CB) {//do something-- Asynchronous or other CB (ERR); //if err is not null or undefined, it will stop executing, and note that this means execution failed}); //defines a dependent task that must be completed before this task executes gulp. ' Two ", [ ", function () {//' one ' after completion}) ; gulp. task ( ' Default ", [  ' One " Two             

When task one finishes executing, you need to call the CB method to tell the task that I've done it, and you can do it.
In our practical use, this is usually the case:

Gulp. Task (' Cleanfunction ' (Gulp.  SRC ([' tmp']).  Pipe (Clean());});        

Where does the CB for clean end be written at this time? Is that right?

Gulp. Task (' Cleanfunction ' (Gulp.  SRC ([' tmp']).  Pipe (CB ();});        

For those who understand what is called async, this method must be no, clean has not finished, CB has been implemented. Fortunately!!!
Fortunately, we can use the time monitoring in gulp to make the end judgment:

Gulp.Task' Clean‘,function (CB) {gulp. src ([ ' Tmp ").  Pipe (clean ()),.  On ( ' End ', CB);}); gulp. task ( ' Concat ", [clean], function () {gulp. SRC ( ' Blabla ").  Pipe ( ' Blabla ").  Dest ( ' Blabla ");        

Because Gulp is implemented with node, it must be bound to the listener event of the data stream, and we do this by listening to the stream event end.
It is not graceful to write [] dependency on the back of a task, and it is often possible to achieve sequential execution through other plugins, as in grunt, but the end event of each task is monitored.
If you do not have a lot of tasks, it is also possible to execute concat directly behind the callback:

Gulp. Task (' Cleanfunction () {})gulp.  Task (' concatfunction () {})gulp.  Task (' Clean-concat', [' CleanGulp.  Start (' concat');})               

4. Others to account for

1. Gulp really only SRC, pipe, dest, watch, run these API? No, since Gulp inherits Orchestrator (<4.0), there are other APIs, including start. Of course, these APIs are not recommended for official use. Can cause code complexity to increase, so it doesn't appear in the official documentation.
2. It is not recommended to write multiple actions in the same task, so that the program does not know that the task ends in a timely manner, such as:

Gulp.Task' Test‘,functionCB) {gulp. src ( ' Bootstrap/js/*.js "). Span class= "Pl-en" >pipe (gulp. Dest ( ' Public/bootstrap ").  On ( ' End ", CB); gulp. src ( ' jquery.cookie/jquery.cookie.js pipe (gulp. Dest ( ' Public/jquery ").  On ( ' End ', CB);});        

1. Minimizing the number of tasks, many of which can be executed in a task with multiple pipes, requires us to plan the folder and task flow at the time of packing.

Yes, gulp4.0 will bring us a lot of surprises (wtf!), though it's still a long overdue release ... Don't want to step on the pit for the moment. Readers are free to Google.

Grunt vs Gulp