Gulp.js----Front-end build tools that are easier to use than grunt

Source: Internet
Author: User
Tags globs

Gulp.js----Front-end build tools that are easier to use than grunt

Grunt has been a front-end build tool, but he is not without blemish, Gulp's author Eric Schoffstall summarizes presentation's shortcomings in his introduction to Gulp.js Grunt:

    1. plugins are difficult to comply with single responsibility . Because Grunt's API design is flawed, many plugins have to be responsible for something unrelated to their main task. For example, to rename a processed file, you might be using  , uglify   plugins, or   concat   Plug-ins (depending on who is the last part of the workflow).
    2. use plugins to do things that do not need plugins 。 Because Grunt provides a unified CLI entry, subtasks are defined by the plug-in and executed by CLI commands, so even simple external commands (such as running   Karma start ) have to have a plug-in responsible for encapsulating it and then becoming Grunt the parameters of the CLI command to run, superfluous.
    3. trying to do everything with a configuration file, and the result is chaos. . A larger, more complex build/distribution/deployment process with Gruntfile   A lot of people who believe there are experiences. What Gulp.js pursues is "write a program rather than write a configuration", it is a kind of   node Way .
    4. backward Process Control results in performance lag due to the headaches of temporary files/folders . This is the focus of the gulp.js knife, but also the "flow of construction" in this title to solve the fundamental problem. The flow-type construction changes the bottom-level process control, greatly improves the construction work efficiency and the performance, gives the user the intuitive feeling is: faster.

Gulp relative to Grunt There are five main advantages :

1. Using gulp.js, your build script is code, not configuration file;

2. Use standard Libraries (node. JS Standards Library) to write scripts;

3. Plugins are very simple, only responsible for the completion of one thing.

4. Tasks are performed with the maximum number of concurrent executions;

5. Input/output (I/O) is based on "streaming".

Let's take a look at how to build a project using Gulp in the project! Before we build, let's install the next gulp.

One: Gulp Installation-command line tool. Global Install Gulp command: NPM install-g Gulp as follows:

as above, the Description Gulp has been installed to complete!

Two: Project Demo demo

1. Enter the root directory of the project Gulp as follows:

As above, is my Project gulp file.

1. At the root of the project see if there is no package.json, if not, we need to run the next command NPM Init, as follows:

the Package.json file is then produced under the project and path.

2. Under Project file Gulp, install the dependent component for development, run the command: NPM install--save-dev Gulp is as follows:

after the run is complete, produce the Node_modules file in the root directory as follows:

3. Create a new gulpfile.js under the path of the project, as follows:

We can give gulpfile.js the initial content as:

  varrequire(' Gulp '); 
  gulp.task (' default 'function() {});

4. Run the Gulp command as follows:


Above is the most basic operation, the following we look at a specific demo bar, or the above Project gulp file, we now need to gulp project files under the SRC all JS files merged into the Dist directory build.js, The compressed file is build-min.js.
Before this, we need to install the following plugins:
1. Grammar check (gulp-jshint).
2. Merge files (gulp-concat).
3. Compression code (GULP-UGLIFY).

One: Syntax check Run command: NPM install Gulp-jshint--save-dev as shown:

Two: Merge file Run command: NPM install Gulp-concat--save-dev as shown:

Three: Compression code Run command: NPM install gulp-uglify--save-dev as shown:

After the plugin is loaded, we can look at the root directory with a few more plugins, as shown below:

Which gulp-rename us to remove, not to.

Four: Create the Gulpfile.js file at the root of the project with the following content:

varGulp = require (' Gulp '));varJshint = require (' Gulp-jshint '));varConcat = require (' Gulp-concat '));varUglify = require (' gulp-uglify '));//Grammar CheckGulp.task (' Jshint ',function () {    returnGULP.SRC (' Src/*.js '). Pipe (Jshint ()). Pipe (Jshint.reporter (' Default '));});//compressing code after merging filesGulp.task (' Minify ',function (){     returnGULP.SRC (' Src/*.js '). Pipe (Concat (' Build.js '). Pipe (Gulp.dest (' Dist ') . Pipe (Uglify ()). Pipe (Rename (' Build.min.js '). Pipe (Gulp.dest (' Dist '));});//monitor changes to filesGulp.task (' Watch ',function() {Gulp.watch (' Src/*.js ', [' jshint ', ' minify ']);});//Registering default TasksGulp.task (' Default ', [' jshint ', ' minify ', ' Watch ']);

Finally, under the command line, run the Gulp command. As shown below:

Now let's go back to the directory and see the following:

As Gulpfile.js, we can see that basically all of the tasks are this pattern.

Gulp.task ("Task Name", function () {

Return gulp.src ("file")

. Pie (...)

. Pie (...)

})

Get the file to be processed, pass to the next link processing, and then continue to pass the returned results to the next link, until the end of all links, pipe is the stream module is responsible for the transfer of stream data method only.

Let's take a look at Gulp's simple API, as follows:

1. Gulp.task (NAME[,DEPS],FN) Registration task.

Name: is the task name, Deps is an optional array, lists the tasks to be performed in this task, FN is the task body, this is the core of gulp.js, such as the following is a very simple task function:

Gulp.task ("Test", function () {Console.log ("111")});

The task method can also specify a set of tasks that run sequentially, as follows:

Gulp.task ("Build", [' CSS ', ' JS ', ' Java ']);

The above code first specifies the build task, which consists of Css,js,java three tasks in order, note that each task is called asynchronously, so there is no way to guarantee that the task will be executed first.

If you want to execute in a strict order, you can write code like this:

Gulp.task (' CSS ', [' JS '],function () {});

As the above code shows: The task of CSS depends on JS, so the CSS must be in the JS run after the execution.

If the name of a task is default, it represents the defaults task and runs gulp directly on the command line.

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

2.GULP.SRC (Globs[,options]): Indicates the path to the source file, options is optional.

there are several forms:

1.js/app.js indicates the exact file name.

2.js/*.js a directory with all the suffixes named JS files.

3.js/**/*.js all files with a suffix named JS in a directory and all of its subdirectories.

4.!js/app.js All files except Js/app.js

5. *.+ (JS|CSS) matches the root directory of the project, all files with the suffix JS or CSS.

The parameters of the SRC method can also be an array to specify multiple members, as follows:

GULP.SRC ([' Js/**/*.js ',! Js/app.js]).

3. Gulp.dest (path) indicates the target output path after the task is processed.

4.gulp.watch (Globs[,options],task)/gulp.watch (GLOBS[,OPTIONS,CB]), listen for changes to the file and run the corresponding task.

As in the Gulpfile.js code, I listen to the Jshint and Minify code, as long as the syntax error will be prompted at the command line: as follows:

The official website has more about Gulp plug-ins (http://gratimax.net/search-gulp-plugins/) we can according to their own needs, to need a module, registration tasks and execution or the same as above.

Gulp.js----Front-end build tools that are easier to use than grunt

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.