Gulp Usage Introduction

Gulp Usage Introduction

• Gulp
• Gulp Plug-in
• Configuration file for Gulp Gulpfile.js
• Gulp syntax
• Gulp Instances
• Disadvantages of Gulp

Gulp

Gulp is a front-end automation build tool based on node. JS, primarily for code packaging. The current mainstream front-end packaging tools, Grunt,gulp,webpack. Grunt now seems to be slowly replaced by gulp, and I use Gulp is also directed at everyone said the configuration is simple to go, as for the channel flow, the operation of files or something is actually secondary; Webpack is now very fire, heard powerful, not used.

npm install gulp -g

Note that you need to install Gulp in NPM Global, or you cannot find the Gulp shortcut command in the Command window, remember to check the configuration of the environment variables.

Gulp Plug-in

Gulp use is inseparable from the use of Gulp plug-ins, the following are commonly used several.

npm install del gulp gulp-concat gulp-minify-css gulp-replace gulp-uglify gulp-rev gulp-rev-collector --save-dev

• Del and Gulp-clean

  Del is a plugin for node. js, both of which have similar effects and are used to purge files. As for why use del instead of Gulp-clean, I am looking at an article recommended online.

• Gulp-concat

  Gulp-concat is used for file merging, you can combine multiple files into one file, reducing the number of static resources.

• Gulp-minify-css

  Gulp-minify-css is a compression tool for CSS.

• Gulp-uglify

  Gulp-uglify is a compression tool for JS. The official document reads, "Minify files with Uglifyjs."

• Gulp-replace

  Gulp-replace is a text modification plug-in, we generally used to do the file content of the changes, commonly used is path modification.

• Gulp-rev and Gulp-rev-collector

  Gulp-rev and Gulp-rev-collector, it is not used, here only to mark. These two plug-ins can be used to process the file name, while generating a JSON file to save the modified file name and the modified filename, and automatically process the changes in the file, the sample file as for the CSS file.

Configuration file for Gulp Gulpfile.js

Gulp relies on configuration file gulpfile.js, the task execution code that needs to manually create Gulpfile.js,gulp in the Run directory calls Gulpfile.js.

Gulp syntax

Gulp syntax is very simple, the function implementation relies on a variety of plug-ins, so the cost of learning is very low. The grammar of Gulp is actually the Nodejs grammar.

• Declaring a dependent plug-in

var gulp = require (' Gulp '); var minifycss = require (' gulp-minify-css '); var concat = require (' Gulp-concat '); var uglify = require (' gulp-uglify '); var del = require (' del '); var replace = require (' Gulp-replace ');

• Defining Tasks (Task)

Gulp.task ('taskname'function() {}); // defaults is the default task, which executes when the command line is called by default. gulp.task ('default', []);

• Command line invoke task (Task)

// direct call to specific taskGulp    // Call default defaults, if no use will error

• Multiple task merges

  Gulp.task ('default', ['task1'task2  'task3'task4');

• File copy Syntax

  GULP.SRC (' oldpath/images/*.* ')  . Pipe (Gulp.dest (NewPath+ '/images '));

• File Merge and compression syntax

   // css file  GULP.SRC ([' App/assets/styles/style.css '  ' app/assets/styles/public.css ') Span style= "color: #000000;" >,  ' app/assets/styles/page.css ' ,  ' App/assets/styles/jquery-u I-1.10.3.css '  ' style.css '  // js file  gulp.src ([ ' app/components/*/*.js '  ' components.js '  

• Text modification

  function () {  gulp.src (demodir+ '/index.html ')      . Pipe (replace (' <link rel= ' stylesheet ' > ', ') )  // Delete    . Pipe (replace (/\.\.\/assets\//g, '))                // Regular replace    . Pipe (replace (/\.\.\/images/g, ' images '))      . Pipe (Gulp.dest (NewPath));

• Directory cleanup

  function (CB) {  del (RootPath, CB);});

Gulp Instances

varGulp = require (' Gulp '));varMinifycss = require (' gulp-minify-css '));varConcat = require (' Gulp-concat '));varUglify = require (' gulp-uglify '));vardel = require (' del ');varReplace = require (' Gulp-replace ');varroot = ' dist ';varPartnerdir = root + '/partners '; Gulp.task (' Partners ',function() {GULP.SRC (' App/assets/images/*.* '). Pipe (Gulp.dest (Partnerdir+ '/images ')); GULP.SRC ([' App/assets/styles/style.css ',              ' App/assets/styles/public.css ',              ' App/assets/styles/page.css ',              ' App/assets/styles/jquery-ui-1.10.3.css ']). Pipe (Concat (' Style.css ') . Pipe (Minifycss ()). Pipe (Gulp.dest (Partnerdir)); GULP.SRC ([' App/assets/js/jquery-1.11.1.min.js ',            ' App/assets/js/jquery-ui-1.10.3.js ',            ' App/assets/js/bootstrap.js ',            ' App/assets/js/echarts.js ']). Pipe (Uglify ()). Pipe (Gulp.dest (Partnerdir+ '/js ')); GULP.SRC (' App/partners/modules/*/*.html '). Pipe (Gulp.dest (Partnerdir+ '/modules ')); GULP.SRC ([' App/bower_components/angular/angular.js ',        ' App/bower_components/angular-ui-router/release/angular-ui-router.min.js ',        ' App/bower_components/angular-resource/angular-resource.js ',        ' App/bower_components/angular-cookies/angular-cookies.js ',        ' App/bower_components/angular-messages/angular-messages.min.js ']). Pipe (Uglify ()). Pipe (Gulp.dest (Partnerdir+ '/bower_components ')); GULP.SRC ([' App/components/services/*.js ',            ' App/components/directives/*.js ']). Pipe (Concat (' Components.js ') . Pipe (Uglify ()). Pipe (Gulp.dest (Partnerdir)); GULP.SRC ([' App/partners/modules/*/*.js ',. Pipe (Concat (' Modules.js ') . Pipe (Uglify ()). Pipe (Gulp.dest (Partnerdir)); GULP.SRC (' App/partners/*.js '). Pipe (Uglify ()). Pipe (Gulp.dest (Partnerdir)) gulp.src (' App/partners/*.html '). Pipe (Gulp.dest (Partnerdir))}); Gulp.task (' Partners-replace ',function() {gulp.src (Partnerdir+ '/index.html ')          //Styles. Pipe (replace (' <link rel= ' stylesheet "href=" ... /assets/styles/public.css ">", "). Pipe (replace (' <link rel= ' stylesheet "href=". /assets/styles/jquery-ui-1.10.3.css ">", "). Pipe (replace (' <link rel= ' stylesheet "href=". /assets/styles/style.css ">", ' <link rel= "stylesheet" href= "Style.css" > "))           //bower_components. Pipe (replace (' <script src= '). /bower_components/angular/angular.js "></script>",                                     ' <script src= ' bower_components/angular.js ' ></script> '). Pipe (replace (' <script src= '. /bower_components/angular-ui-router/release/angular-ui-router.min.js "></script>",                                     ' <script src= ' bower_components/angular-ui-router.min.js ' ></script> '). Pipe (replace (' <script src= '. /bower_components/angular-resource/angular-resource.js "></script>",                                     ' <script src= ' bower_components/angular-resource.js ' ></script> '). Pipe (replace (' <script src= '. /bower_components/angular-cookies/angular-cookies.js "></script>",                                     ' <script src= ' bower_components/angular-cookies.js ' ></script> '). Pipe (replace (' <script src= '. /bower_components/angular-messages/angular-messages.min.js "></script>",                                     ' <script src= ' bower_components/angular-messages.min.js ' ></script> '))        // Components. Pipe (replace (' ... ', ' <script src= "components.js" ></script> "))            //Modules. Pipe (replace (' ... ', ' <script src= "modules.js" ></script> ") . Pipe (Gulp.dest (Partnerdir)); GULP.SRC (Partnerdir+ '/*.* '). Pipe (replace (/\.\.\/assets\//g, "). Pipe (replace (/\.\.\/images/g, ' images ') . Pipe (Gulp.dest (Partnerdir)); GULP.SRC (Partnerdir+ '/modules/*/*.html ', {base: ' modules '}). pipe (replace (/\.\.\/assets\//g, "). Pipe (replace (/\.\.\/images/g, ' images '). Pipe (Gulp.dest (' Modules ')); }) Gulp.task (' Clean ',function(CB) {del (root, CB);}); Gulp.task (' Replace ', [' Partners-replace ']); Gulp.task (' Default ', [' Partners ']);

Disadvantages of Gulp

• The problem is difficult to locate, there is no way to run the Middle Debug,console.log () can not be a good location problem.
• Task serial execution is problematic.

Gulp Usage Introduction