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