Use of Gulp (ii) configuration of the Gulpfile.js file

What is the Gulpfile.js file:

Gulp is a tool for building code in the front-end development process, and is the building block of automation projects ; She not only optimizes the site resources, but also has many repetitive tasks that can be automated using the right tools during the development process; We can not only very happy to write code, but also greatly improve our efficiency.

Gulpfile.js is the core document that helps gulp automate the management of project functionality.

Step 1: Install the Gulp plugin on the command line (if GULP:NPM install gulp-g is installed)

You can download multiple plugins at the same time:

cnpm Install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin Open--save-dev< /c3>

Note 1: Because the NPM installation plug-in is downloaded from a foreign server and is affected by the network and may be abnormal, it is recommended to use CNPM.

Note 2: Project dependencies are divided into two types,

--save: One is common project dependencies such as Bootstrap, but also in a development phase need to use,

--save-dev This belongs to development dependencies such as gulp, development relies on the final record in the Devdependencies node

Note 3: Some common Gulp plugins:

1. gulp-less: Turn less files into CSS files

2.gulp-clean-css:css file compression.
3.GULP-UGLIFY:JS compression
4.gulp-concat:js Merging
5.gulp-rename: Rename, add to JS compressed file. min suffix
6.gulp-jshint:js Grammar Check

Step 2: Create a folder under the project folder named Gulpfile.js, after the above plug-in download is complete, you can configure the relevant code management functions:

Step 3: Start opening the Gulpfile.js file write code configuration (take the Gulp-less plugin as an example):

1 varGulp = require (' Gulp '),//loading the Gulp module2 3less = require (' gulp-less ');//loading plug-ins that need to be used4 //Define a testless task (custom task Name)5 6Gulp.task (' testless ',function () {7 8GULP.SRC (' less/*.less ')//The file that the task targets9 Ten. Pipe (less ())//The module that the task calls One  A. Pipe (Gulp.dest (' CSS '));//The index.css will be generated under CSS -  - }); the  - //listening to less files -  -Gulp.task (' Gulpwatch ',function(){ +Gulp.watch (' less/*.less ', [' testless ']); - }); + //also let the default program execute once, can increase the start execution speed.  A  atGulp.task (' Default ', [' testless ', ' Gulpwatch ']);

Finally, enter Gulp execution on your current project command line. You will see that the corresponding CSS file is generated under the associated path.

However, in general, we do not need to configure such a file in the company, because each time the development of the project can use the company has configured the Gulpfile.js file,
Copy the following code into the Gulpfile.js file you created to use:

The code is as follows:

varApp = {//Define DirectorySrcpath: ' src/', BuildPath:' Build/', Distpath:' dist/'}/*1. When introducing Gulp and Gulp plug-ins, to download these plugins*/varGulp = require (' Gulp '));varless = require (' gulp-less ');varCssmin = require (' gulp-cssmin '));varUglify = require (' gulp-uglify '));varConcat = require (' Gulp-concat '));varConnect = require (' Gulp-connect ');varImagemin = require (' gulp-imagemin '));varOpen = require (' Open ');/*Put the bower download front-end frame into our project*/Gulp.task (' Lib ',function() {GULP.SRC (' Bower_components/**/*.js '). Pipe (Gulp.dest (App.buildpath+ ' Lib '). Pipe (Gulp.dest (App.distpath+ ' Lib ') . Pipe (Connect.reload ())//Reload when the content changes. });/*2. Define tasks move all HTML files to another location*/Gulp.task (' HTML ',function () {    /*which files to manipulate to determine the source file address*/gulp.src (App.srcpath+ ' **/*.html ')/*all. html files under all directories under SRC*/. Pipe (Gulp.dest (app.buildpath))//gulp.dest to put the file to the specified target location. Pipe (Gulp.dest (App.distpath)). Pipe (Connect.reload ())//Reload when the content changes. });/*3. Perform the task through the command line. Gulp Task Name*//*define compile less task download the corresponding plug-in gulp-less * Convert the not file into CSS and put it into the build **/Gulp.task (' Less ',function() {gulp.src (App.srcpath+ ' style/index.less '). Pipe (Less ()). Pipe (Gulp.dest (App.buildpath+ ' css/'))        /*compressed and placed in the Dist directory*/. Pipe (Cssmin ()). Pipe (Gulp.dest (App.distpath+ ' css/') . Pipe (Connect.reload ())});/*Merge JS*/Gulp.task (' JS ',function() {gulp.src (App.srcpath+ ' Js/**/*.js '). Pipe (Concat (' Index.js '). Pipe (Gulp.dest (App.buildpath+ ' js/') . Pipe (Uglify ()). Pipe (Gulp.dest (App.distpath+ ' JS ') . Pipe (Connect.reload ())});/*Compress Pictures*/Gulp.task (' Image ',function() {gulp.src (App.srcpath+ ' images/**/* '). Pipe (Gulp.dest (App.buildpath+ ' images ') . Pipe (Imagemin ()). Pipe (Gulp.dest (App.distpath+ ' images ') . Pipe (Connect.reload ())});/*perform multiple tasks simultaneously [name of other tasks] * When the current bulid, all tasks in the array are automatically executed. * */Gulp.task (' Build ', [' less ', ' html ', ' JS ', ' image ', ' Lib ']);/*Define Server task * Build a server. Set the build directory to run **/Gulp.task (' Server ', [' Build '],function () {    /*setting up the server*/Connect.server ({Root:[app.buildpath],//which directory to runLivereload:true,//whether the update is hot. port:9999//Port number    })    /*which tasks to monitor*/Gulp.watch (' bower_components/**/* ', [' Lib ']); Gulp.watch (App.srcpath+ ' **/*.html ', [' HTML ']); Gulp.watch (App.srcpath+ ' js/**/*.js ', [' JS ']); Gulp.watch (App.srcpath+ ' images/**/* ', [' image ']); Gulp.watch (App.srcpath+ ' style/**/*.less ', [' less ']); //opens the specified address (http://localhost:9999) via the browser. Open (' http://localhost:9999 ');});/*Define the default task * Execute the task that gulp will call directly **/Gulp.task (' Default ', [' Server '];

Use of Gulp (ii) configuration of the Gulpfile.js file