This article is an introductory introduction to Gulp, the main content of what is the difference between Gulp,gulp and grunt, gulp can solve the problem of grunt, as well as a simple illustrative example.
What is GulpThe official definition of Gulp is very concise: a file-stream-based build system. The main differences between streaming, gulp and grunt in the construction process are highlighted here. The specific difference is where, the following will be introduced briefly.
Another grunt?Believe that a lot of front-end classmates to grunt are not unfamiliar, grunt appearance can be said to be the front-end of the gospel, a lot of people need to complete the repetitive work, with the grunt, a command to get it done.
Speaking of which, many students may be more doubtful: Since the grunt, the same positioning in the front-end of the construction of the gulp the significance of the existence? From the introduction of Gulp, Gulp is to solve the front-end students in the use of the grunt process encountered such problems and appear. What are the problems? In the slide of Http://slid.es/contra/gulp, several points were mentioned, such as:
Some problems existed in grunt1, plug-in function is not single
2, the plug-in completed this should not be done by the plug-in things (this I am a little confused, why is things don ' t need to be plugins? ）
3, the configuration is too complex
4. Temporary files/directories due to poor process control
The previous list of four points grunt the use of the problem, of which 1, 2 points of personal feel slightly far-fetched, plug-in function is not single, or complete should not be done by the plug-in things, this with grunt in fact, the relationship is not big, More should be attributed to the author of the plugin (the author of the most frequently used part of the plugin is the brother of the grunt team).
The next two points are more agreeable: complex configuration, poor process control.
The complexity of the configuration is not too much to say, and in this regard it may be a big fight for Parliament. Poor process Control is criticized more, especially in larger projects. The following diagram is Grunt's current workflow: Read files, modify files, write files-read files, modify files, write files ——。。。
The problem is obvious:
1, inefficient: Frequent disk IO will make the construction efficiency become low
2, not effective concatenation : Read files, modify files, write the loop of the file, resulting in plug-ins and plug-ins before the work can not effectively series together.
Note: The drawing comes from the slide mentioned above
As an example,For example, under the project there is a index.html, App.scss, App.js, and Index.html quoted App.css, App.js, as shown below. Assuming the final goal is to compile the compressed app.css, compressed app.js inline into the index.html, while preserving the pre-compression app.css, app.js source files, then the process may be as follows: (not necessarily completely accurate)
1, copy the index.html, app.js, compile generated app.css to dist/
2. Compress app.js, app.css, and generate to temp directory. tmp/
3, the. tmp/app.js,. Tmp/app.css in the dist/index.html
<html><head> <link type= "Text/css" rel= "stylesheet" href= "app.css"/></head> <body>< Script src= "app.js" > </script></ body></HTML>Built in a gulp way
As you can see from the build process above, multiple file reads and writes, as well as temporary directories, appear in an unavoidable gesture. In the Gulp author's conception, the reasonable construction process should be this: read the file--Modify the file--Modify the file ... --Write a file (map from the slide mentioned above)
In this scenario, the example above is rewritten with gulp, and the process should be
1, read the file: Read index.html, App.js, app.css (read file)
2, compile, compress app.css, compress app.js (process file stream)
3, the A, B inline into the index.html (or processing file streams)
4. write the file : Write the result of the final generation to the dist/directory (modified index.html, compiled app.css, unmodified app.js)
A simple example of compressing a file1, first global Installation Gulp command line tool (equivalent to GRUNT-CLI)
NPM Install-g Gulp
2, then, under the Project Installation Gulp (equivalent to grunt), gulp-uglify
--save-dev Gulp Gulp-uglify
3. Create gulpfile.js under the project root directory
Require (' gulp '), require (' gulp-uglify '); Gulp.task (function() {gulp.src (' src/app.js '). Pipe (Uglify ()). Pipe (Gulp.dest (' dist/');}); I tested it myself, and it was pretty good, but it wasn't very beautiful.
var gulp = require (' gulp ');
Get MINIFYCSS module (for compressing CSS)
Minifycss = require (' Gulp-minify-css '),
MINIFYJS = require (' gulp-uglify '),
del = require (' del ');
Gulp.task (' Minifycss ', function () {
This is a common configuration file
var options = {
Removecomments:true,//clear HTML annotations
Collapsewhitespace:true,//compress HTML
Collapsebooleanattributes:true,//omitting the value of the Boolean attribute <input checked= "true"/> ==> <input checked/>
Removeemptyattributes:true,//delete all spaces as attribute values <input id= ""/> ==> <input/>
Removescripttypeattributes:true,//delete <script> type= "Text/javascript"
Removestylelinktypeattributes:true,//delete <style> <link> type= "Text/css"
Minifyjs:true,//Compression page JS
Minifycss:true//Compress page CSS
};
Return Gulp.src ('./css/*.css ')//compressed file
. Pipe (Minifycss (options))
. Pipe (Gulp.dest (' minifycss/css '))//Output folder
. Pipe (Minifycss ()); Perform compression
});
Gulp.task (' Minifyjs ', function () {
This is a common configuration file
var options = {
Removecomments:true,//clear HTML comment
Collapsewhitespace:true,//compress HTML
Collapseboole Anattributes:true,//omitting the value of the Boolean attribute <input checked= "true"/> ==> <input checked/>
Removeemptyattribu Tes:true,//delete all spaces as attribute values <input id= ""/> ==> <input/>
//Removescripttypeattributes:true,//delete <script> type= "Text/javascript"
//Removestylelinktypeattributes:true,//delete <style> and <link> t Ype= "Text/css"
Minifyjs:true,//Compress page JS
//minifycss:true//Compress page CSS
};
Return Gulp.src ('./js/*.js ')//compressed file
. Pipe (MINIFYJS (options))
. Pipe (Gulp.dest (' Minifyjs /js ')//output folder
. Pipe (Minifyjs ()); Perform compression
});
//Before performing the compression, delete the contents of the folder
Gulp.task (' Clean ', function (CB) {
del ([' Minifycss/css ', ' MINIFYJS '], CB);//Delete the original file
});
Gulp.task (' Default ', function () {
Gulp.start (' minifycss ');
Gulp.start (' Minifyjs ');});
Pending Update--------------------------------
Glup Getting Started
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
