A brief introduction to the installation and use of the front end construction tool Gulp

the War of Grunt

Eric Schoffstall, author of Gulp.js, summed up some of Grunt's deficiencies in his introduction to Gulp.js's presentation:

Plug-ins are difficult to comply with the principle of single liability. Because Grunt's API design is flawed, many plug-ins have to take responsibility for things that have nothing to do with their main tasks. For example, to rename a processed file, you might use a uglify plug-in, or you might use a concat plug-in (depending on who is the last link in the workflow).

My opinion: This may be a problem, for many people, there is a "grunt" and "out of responsibility" situation. In my opinion, this is also grunt a design idea: the operation of the file is abstracted into a separate component (files), and any plug-ins use it in the same rules. Unfortunately, the process of using it occurs in each plug-in's independent configuration object, so always give people a "do not want this plug-in to do things to do" the awkward feeling.

Use Plug-ins to do things that you don't need plug-ins to do. Because Grunt provides a unified CLI portal, subtasks are defined by Plug-ins and invoked by CLI commands, so even a very simple external command (such as running Karma start) has to have a plug-in to encapsulate it and then run as a parameter to the Grunt CLI command, superfluous.

My opinion: Hold both hands and feet in favor!

Trying to do everything with a configuration file, the result is chaos. Large-scale projects with more complex build/distribution/deployment processes, the gruntfile of which are widely believed to have experience. and Gulp.js pursues "write program rather than write configuration", it walks is a kind of node way.

My opinion: This is a good thing for node.js developers, which is consistent with their style, but for those pure front-end engineers (a large number), there seems to be no noticeable improvement. Moreover, many plug-ins have emerged recently in grunt community to help developers organize/manage/simplify bloated gruntfile, and the results are good. So on this point, it's a matter of opinion.

Backward Process Control creates a lag in performance due to a headache-causing temporary file/folder. This is the focus of the gulp.js knife, but also in this title "Flow-style construction" to solve the fundamental problem. Flow-style construction has changed the underlying process control, greatly improved the efficiency and performance of the construction work, the intuitive feeling to users is: faster.

My view: On the flow of construction, just a few words can not tell its ins and outs, but in the Node.js world, streaming is indeed essential. I recommend a reading material: Stream Handbook, after reading, I believe in my heart.

As a comparison and summary, the author lists five major features of Gulp.js:

1. Using gulp.js, your build script is code, not a configuration file;
2. Use the standard library (Node.js standard library) to write scripts;
3. Plug-ins are very simple, only responsible for the completion of one thing-basically is about 20 lines of function;
4. The tasks are executed with the maximum number of concurrent numbers;
5. The input/output (I/O) is based on "streaming".

the way of Gulp.js

Gulp.js's official documents are on the Github, this article is an introduction, more specific details also please read the document. Here I will gulp.js installation and use of the process to do a brief, first to enjoy the gulp.js of the style bar.

Step one: Install command line tools

$ NPM Install-g Gulp

Step Two: Install Gulp under your project to develop dependent components (assuming you've created Package.json)

$ CD <YOUR_PROJECT>
$ npm Install Gulp--save-dev

Step three: Create the gulpfile.js under the root path of the project, starting with the following:

var gulp = require (' gulp ');

Gulp.task (' Default ', function () {
});

Fourth Step: Run!

$ gulp
So far so good! Look, it's not too far from grunt, is it? Indeed, Gulp.js's learning curve is fairly flat. Next, in order to successfully write the build script, we'll learn a few core API functions--don't worry, Gulp.js's API is very simple, we need to know only four is enough to deal with the vast majority of script writing (and in grunt words, these four are not any fresh goods).

1. Gulp.task (name[, Deps], FN): Registering tasks
Name is the task name; Deps is an optional array that lists the tasks that you want to perform on this task; FN is the task body, this is the core of gulp.js, it takes time to get to the bottom of it, see this for details.

2. GULP.SRC (globs[, Options]): Indicates the source file path

Used grunt words, globs must be not unfamiliar, there is no change; options are optional, please see the gulp.js API

3. Gulp.dest (PATH): Indicates the target output path after the task is processed

4. Gulp.watch (glob[, Options], Tasks)/gulp.watch (glob[, Options, CB)): Monitor file changes and run corresponding tasks. You see, watch as the core API appears in the Gulp.js, the specific use or to read more documents, but next we will demonstrate a simple example.

Example

Let's practice one of the most common examples of building scripts that are required to write a node.js program. To do this we have three things to do (the name of the corresponding plugin is listed in parentheses, please find more plugins here):

1. Grammar check (gulp-jshint)
2. Consolidated document (GULP-CONCAT)
3. Compression code (GULP-UGLIFY)
In addition, we may also need file renaming operations, so gulp-rename can also be useful. Then we need to install these plugins under the project first:

$ NPM Install <PLUGIN_NAME>--save-dev
Finally, we complete all the tasks, the complete code is as follows:

var gulp = require (' gulp ');
var jshint = require (' Gulp-jshint ');
var concat = require (' Gulp-concat ');
var uglify = require (' gulp-uglify ');
var rename = require (' Gulp-rename ');

Grammar check
Gulp.task (' Jshint ', function () {
Return gulp.src (' Src/*.js ')
. Pipe (Jshint ())
. Pipe (Jshint.reporter (' Default '));
});

Compress code after merging files
Gulp.task (' Minify ', function () {
Return gulp.src (' Src/*.js ')
. Pipe (Concat (' all.js '))
. Pipe (Gulp.dest (' dist '))
. Pipe (Uglify ())
. Pipe (Rename (' All.min.js '))
. Pipe (Gulp.dest (' dist '));
});

Changes to monitoring files
Gulp.task (' Watch ', function () {
Gulp.watch (' src/*.js ', [' jshint ', ' minify ']);
});

Registering default Tasks
Gulp.task (' Default ', [' jshint ', ' minify ', ' Watch ']);
As you can see, basically all of the task bodies are this pattern:

Gulp.task (' Task Name ', function () {
return gulp.src (' file ')
. Pipe (...)
. Pipe (...)
Until the last step of the mission.
. pipe (...);
});

Very easy to understand! Gets the file to be processed, passes it to the next link, and then passes the returned results to the next link ... Until all links are complete. Pipe is the stream module is responsible for the transfer of data, the first return is the entire task of the stream object returned, so that tasks and tasks can be passed in sequence.

Perhaps it would be more intuitive to write this:

Gulp.task (' Task_name ', function () {
var stream = gulp.src (' ... ')
. Pipe (...)
. Pipe (...)
Until the last step of the mission.
. pipe (...);
return stream;
});

At this point, you can use Gulp.js to complete most of the build work. Next, I also prepared a few suggestions for you:

1. Take a moment to browse through the Gulp.js plug-in library and get a general idea of what you can do with existing plug-ins
2. For commonly used plug-ins, carefully read their own documents in order to maximize their effectiveness
3. Take time to learn the Gulp.js API, especially gulp.task () detailed description of the task body, learn how to perform the callback function (callback), how to return to promise, etc.
4. Try to write the work of their own workflow and habits of the task, if it works well, make it into Plug-ins released to everyone!