Gulp, Grunt build tools

Creating a library in Gulp reads the source file from disk Gulp.src and writes back content to gulp.dest through the disk pipeline, as it is understood to be just copying the file to another directory.

var gulp = require ('gulp'); Gulp.task ('build'  , function () {  return  Gulp    . SRC ('./sample.js ' )    . Pipe (Gulp.dest ('./build');});

The copy file was completed, but it did not compress the JS file. To do this, you must use a gulp plugin. In this case, you can use Gulp-uglify, the popular uglifyjs compression codec Yi Plugin

varGulp = require ('Gulp');varUglify = require ('gulp-uglify'); Gulp.task ('Build', function () {returnGulp. SRC ('./sample.js'). Pipe (Uglify ()). Pipe (Gulp.dest ('./build'));});

Streaming allows you to add more plug-ins instead of just reading and writing to disk once. You can also specify the size of the content in the buffer. It is important to note that if you add it before compressing it, then the size you get is unminified.

varGulp = require ('Gulp');varUglify = require ('gulp-uglify');varSize = require ('gulp-size'); Gulp.task ('Build', function () {returnGulp. SRC ('./sample.js'). Pipe (Uglify ()). Pipe (Size ()). Pipe (Gulp.dest ('./build'));});

Gulp's core API is only 5, mastering 5 APIs and learning to gulp, then you can combine the tasks you want with your pipeline flow.

• gulp.task(name[, deps], fn): Registering Tasks
• nameis the task name; it deps is an optional array that lists the tasks to be performed in this task, the fn task body, which is the core of Gulp.js and takes time to thoroughly understand it, see here for details.
• gulp.src(globs[, options]): Indicates the source file path
• Used Grunt words, globs will not be unfamiliar, there is no change; options is optional, see the Gulp.js API
• gulp.dest(path): Indicates the target output path after task processing
• gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb]): Monitor changes to the file and run the appropriate tasks. You see, as the watch core API appears in the Gulp.js, the specific use is to read more documents, but then we will show a simple example.

varGulp = require ('Gulp');varJshint = require ('Gulp-jshint');varConcat = require ('Gulp-concat');varUglify = require ('gulp-uglify');varRename = require ('Gulp-rename'); //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 ('All.js'). Pipe (Gulp.dest ('Dist') . Pipe (Uglify ()). Pipe (Rename ('All.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']);

Grunt and Gulp differences: The Grunt Advantage Grunt function is simple, is to manage a series of tasks. Most of the tasks are third-party plug-ins, install the corresponding NPM packages, and then loadNpmTasksYou can use it. It makes it almost effortless for programmers to use JavaScript to build Yi tools. You just need to find the right plug-ins, read their documentation, and then install and configure it. There is a large enough plug-in library that requires little development of your own compilation tasks. Grunt Cons: 1. It is difficult for plugins to adhere to the single responsibility principle. 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 a  uglify  plugin, or a  concat  plugin (depending on who the last part of the workflow is). 2. Use the plugin to do something that you do not need to do. Because Grunt provides a unified CLI entry, the 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 the Grunt CLI The parameters of the command to run, superfluous. Trying to do everything with a configuration file, the result is Chaos 3. If you have an apparently complex Yi process, it may become overly verbose. When developed for a period of time, it is often difficult to make the Yi process as a whole. Once you've compiled the Yi process task to reach two digits, it is almost guaranteed that you will find yourself having to run the same task in multiple targets (Targets) so that you can perform the task flow correctly. Because tasks need to be configured, it's hard to figure out the actual order in which the tasks are executed. You need to write a separate configuration file for each task (or each Yi stream) for your team to use. 4.Gruntfile is difficult to maintain. Configure and Run Detach: Configure the task and call them where it is far away; each plugin does too much: the result of each task must be written to the disk file, another task read again, too many configuration items: The configuration rules for each plug-in are different. With each plugin, you have to learn.  gulpgulp a mechanism based on node JS, each plug-in called Stream,gulp reads input from the stream, does some processing, and then outputs it to the stream. Each plugin is not used independently. Instead, it focuses on fulfilling a single responsibility. A specific task can only be accomplished by combining the appropriate plugins. The output from the previous level becomes directly the input at the back level. Grunt has a grunt-cli, and gulp directly installs Gulp on the line. NPM Install-g Gulp and Grunt's configuration file is called Gruntfile.js, and Gulp is gulpfile.js. Five features of Gulp.js:

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-basically is the function of 20 rows or so;

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

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

Reference: http://www.gulpjs.com.cn/http://www.gruntjs.net/

Gulp, Grunt build tools