Installation and configuration of the gulp of the front-end build tool

When you choose the Build tool, see more people recommend gulp, from this into the Gulp pit ~

First, install the node environment

Baidu Google a bit, in the terminal to enter Node-v and Npm-v, if the display node and NPM version number indicates that the node environment is installed.

Second, Installation Gulp

Install the Global environment under Linux:

sudo Install -G gulp

or CD into the project directory under Install Gulp to project Local:

Install Gulp--save-dev

--save-dev means that the installed Gulp version information is written to the Package.json, updating the devDependencies value to indicate that the project needs to rely on gulp, and when the project is migrated, the NPM install is installed to setup the project environment.

Iii. installation of dependent files

• Check JavaScript (gulp-jshint)
• Compiling sass/less files (gulp-sass/gulp-less)
• Sass/less Mixed Library (node-bourbon/lesshat)
• Compress CSS Files (gulp-minify-css)
• Merging files (gulp-concat)
• Compressing JS files (gulp-uglify)
• Renaming files (gulp-rename)
• ...

Give me a chestnut:

Install gulp-jshint gulp-sass gulp-concat node-bourbon--save-dev

Iv. New Gulpfile.js file

There are only five methods of Gulp: task, run、 watch、 src、 anddest。gulpfile文件书写可以参照下面的栗子：

1 //Introduction of Gulp2 varGulp = require (' Gulp '));3 4 //Introducing Components5 varSass = require (' Gulp-sass '));6 varMinifycss = require (' gulp-minify-css '));7 varRename = require (' Gulp-rename '));8 varConcat = require (' Gulp-concat '));9 varJshint = require (' Gulp-jshint '));Ten varUglify = require (' gulp-uglify ')); One  A //Compiling sass -Gulp.task (' sass ',function () { -Gulp.src ('./css/*.scss ')) the . Pipe (Sass ({ -Includepaths:require (' Node-bourbon '). Includepaths -         })) -. Pipe (Concat (' Style.min.css ')) + . Pipe (Minifycss ()) -. Pipe (Gulp.dest ('./css '))); + }); A  at //Grammar Check -Gulp.task (' Jshint ',function() { -     returnGulp.src ('./js/*.js ')) - . Pipe (Jshint ()) -. Pipe (Jshint.reporter (' Default ')); - }); in  - //compressing code after merging files toGulp.task (' Minify ',function(){ +Gulp.src ('./js/*.js ')) -. Pipe (Concat (' All.js ')) the. Pipe (Gulp.dest ('./js '))) * . Pipe (Uglify ()) $. Pipe (Rename (' All.min.js '))Panax Notoginseng. Pipe (Gulp.dest ('./dist '))) - }); the  + //Default Task AGulp.task (' Default ',function () { theGulp.run (' sass '); +Gulp.run (' Jshint '); -Gulp.run (' Minify '); $Gulp.watch ('./css/*.scss ',function () { $Gulp.run (' sass '); -     }); -});

V. Implementation of the Gulp

Perform all tasks on the terminal by executing the following command

Gulp

or perform a single task

Gulp Minify

OK, you are done ~

Reference:

• Dry this Coke! Gulp Getting Started Guide
• Front-end build tool Gulp Getting Started tutorial
• Gulp Thinking-gulp advanced techniques
• Gulp API Documentation
• Bourbon x gulp.js

Installation and configuration of the gulp of the front-end build tool