Gulp Front-end automation build tool

Gulp is an automated build tool based on Nodejs,

Can be automated to complete the JS CSS sass less HTML image testing, inspection, merging, compression, formatting, browser automatic refresh, deployment file generation, listening files.

1: Nodejs (. msi) based on Nodejs

2: Command Pack NPM,NPM is a NODEJS package management tool that installs and uninstalls node plugins.

NPM Install XX-G Installation XX plug-in global installation

--save Save Configuration to Package.json (Package.json Save the installation plugin information to this, so that other developers can directly download the required package directly from NPM install)

--dev Save to Package.json devdependencies node

Package.json can be created directly under the project, or at the command line NPM Init

Package Specific information:

{  "Name": "Test",//project name (required)"Version": "1.0.0",//Project version (required)"description": "This was for study Gulp project!",//Item description (required)"Homepage": "",//Project Home"Repository": {//Project Resource Library' type ': ' Git ',    "url": "Https://git.oschina.net/xxxx"  },  "Author": {//Project Author Information"Name": "Surging",    "Email": "[email protected]"  },  "License": "ISC",//Project License Agreement"Devdependencies": {//plug-ins for project Dependencies"Gulp": "^3.8.11",    "Gulp-less": "^3.0.0"  }}

3: New Gulpfile.js

Gulpfile.js is the Gulp configuration file, new to the project root directory, gulp itself will not do anything, can write tasks in Gulpfile, he gulp to perform

Previous examples of building a front-end automation development environment

　　

//require load module, import Toolkit (node_modules corresponding module)varGulp = require (' Gulp ')), less= Require (' gulp-less ');//Define a testless taskGulp.task (' testless ',function() {GULP.SRC (' Less/*.less ')//The task targets the file, matches all the less files, creates a stream object, passes to the less () function. Pipe (less ())//the calling module of the task, less () will return a stream object after the data is modified and passed to Gulp.dest (). Pipe (Gulp.dest (' dist '));//generate files or folders for incoming data, non-existent folders will be created and CSS will be generated under the Dist file .}); Gulp.task (' Default ', [' testless ']);//Defining default Tasks//Gulp does not provide a task name, the default task will be executed, we put the testless task before default execution, all execution $gulp, will compile less file

4:gulp's API

1:GULP.SRC (Globs[,options]) src points to the source file path that needs to be processed

Globs need to process source file match path

Examples of wildcard characters:

Src/a.css Specifying specific files

Src/*.js matching all JS files

Src/**/*.js matches JS under multiple or 0 folders under SRC

Src/{a,b}.js match src under a.js b.js

src/*. {Png,jpg,gif,svg} matches all PNG, JPG, GIF, SVG under SRC

!src/a.js excluding SRC under the a.js

Options type Optional, object has three properties buffer, read, base

Buffer default True sets False, returns File.content stream and does not buffer files, processing large files is very useful

Read default True to set false, read file operation is not performed, NULL is returned

Base default string setting output path stitching backwards on a component

　　　　　　　　

2:gulp.dest (path[,options]) file output path after processing

Path file output paths, you can define functions, return file output path

Options there are two properties of CWD mode

mode specifies the permissions to create a folder

CWD Example: Gulp.dest ('./dist/', {cwd: "Test"}) if there is no CWD directory: DIST/XX has CWD directory is test/dist/xx

3:gulp.task (name [, Deps],fun) defines a gulp task

Name specifies the names of the gulp tasks

Deps the task that the task depends on (executing the currently defined task after the dependent task finishes executing)

fn The plug-in action called by the task

The 4:gulp.watch (glob[,opts],tasks) Watch method is used to listen for file changes, and once the file is modified it executes the specified task

Glob the source file matching path that needs to be processed

OPTs type

An array of task names that tasks need to perform

When less is in error, watch stops and we can stop the Watch event and prompt for an error

Copy the following:

　　　　　　　　　　

5: Real-time monitoring changes, the browser automatically refresh the page

Gulp-livereload npm Install Gulp-livereload--save-dev

Copy of the example, the browser will also be loaded with livereload plug-ins, detailed steps, reference: http://www.ydcss.com/archives/702, Inside also talked about a, I did not test, this test, but did not succeed, do not know what reason--!!!!

var gulp = require (' Gulp '),    = require (' gulp-less '),    = require (' Gulp-livereload ') ); Gulp.task (function() {    gulp.src (' src/less/*.less ')        . Pipe (Less ())        . Pipe (Gulp.dest (' src/css '))        . Pipe (Livereload ());});  Gulp.task (function() {    livereload.listen ();    Gulp.watch (' src/less/**/*.less ', [' less ']) ;

Gulp Front-end automation build tool