Gulp Automation Building Tools

Gulp Automation Building Tools
Reference: http://www.cnblogs.com/aiiright/p/6762355.html
1､ What is Gulp? Gulp is the building tool for front-end code. Can optimize the resources of the website, based on the Nodejs Automatic Task Manager, can complete the test, check, merge, compress, format, automatic browser refresh, deploy file generation, and listen to the changes of files in Js/css/sass/less/image/html/coffee and other files.
How to install Gulp.
1, the Global Installation Gulp command line: NPM install-g. Note) If it is under Windows, you can install it directly, if it is a Mac version, you need to add sudo permission before the command.
2. Project development Dependency (devdependencies) installation command line: NPM Install plugin--save--dev. NPM Install plug-in--save (production environment). (Development environment)
Gulp as well as webpack are the tools needed to develop, and the current is to add--save--dev, put under development attributes.          Vue will be in the production environment, so add-save. How to use Gulp in your project.
First step: NPM init (initialization) Step two: Plug-in installation and configuration                1､ Common Plug-ins: Gulp-sass SASS Compilation
GULP-MINIFY-CSSCSS compression
Gulp-imagemin compressed png/jpg/git/svg format picture file
Browser-sync to maintain multiple browsers, multiple device synchronization, front-end development is very useful, is a prerequisite component.
Gulp-concat Consolidated file
               2､ Install the Basic plug-in command: NPM install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint Gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del--save-dev
               3､ step: A, with the use of Gulp Plug-ins, the first to use the Require to load the plug-in, if the use of plug-ins are very many, gulpfile.js file at the beginning of the following: var gulp = require (' gulp ');
b, automatic loading plug-in gulp-load-plugins this plugin can automatically help you loadThe Gulp plugin in the Package.json file.
                        C, task execution & nbsp;                        Analysis:                                      task-name is the name for the task, command Line execution command: Gulp task-name.                                 output Result: Shuaishuaige.                          Example:                                      gulp.task (' Task-name ', function () {                                          console.log (' shuaishuaige! ');                                      });


The results of successful execution are as follows:


Gulp Altogether V Method:
New Task Gulp.task ()
Get File Source Address Gulp.src ()

File output Address gulp.dest ()
Run Task Gulp.run ()
Listening for file modification Gulp.watch ()
Picture to manipulate GULP.SRC ()
Picture to perform gulp.pipe ()
Plugin name defined in Package.json plugins.uglify ()
Move a picture to a folder Gulp.dest ()



This is the code that I write with Gulp in my project.
        /**          * Assembly installation           * npm Install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-minify-html gulp-load-plugins gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean--save-dev   & nbsp;      * minifyhtml       html Compression           * imagemin           Image Compression          * rubysass          sass compression          * minifyCss         CSS compression          * uglify            js Compression         & nbsp; * Jshint           js Inspection           * rename            File Rename           * concat             File Merging          * clean              Empty Folder          * browsersync       Automatic Refresh          * GULP.SRC ()         pictures to manipulate           * gulp.pipe ()        pictures to perform           * gulp.dest ()        move pictures to Folder          */

Introducing Gulp to the plug-in var gulp = require (' gulp '); var bs = require ("Browser-sync"). Create ();
Gulp-load-plugins plug-in can directly load Package.json inside of the plugin var plugins = require (' Gulp-load-plugins ') ({//Let Gulp-l The Oad-plugins plug-in can match other plug-ins except the Gulp plugin pattern: ' * '};
Static Server + Monitor css/h