Installation guide :
(1) Global installation: $ npm install --global gulp
The development of the project depends on the installation: $ npm install --save-dev gulp
(2) Create a configuration file AMD specification named gulpfile.js in the project root directory
var gulp = require('gulp');
gulp.task('default',function(){// default task code }) //default is the task name
(3) Run gulp //Perform all tasks
gulp <task> <othertask> //Perform specific tasks individually
More function parameters : .src .watch .dest CLI
gulp.src(globs[,options]) Output files that match the provided matching pattern or array of matching patterns . Will return a stream of Vinyl files, which can be piped to other plugins.
gulp.src('client/template/*.jade',{buffer:true,read:true,base:'client'})
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest('build/minified_templates'));
gulp.dest (path,[,options]); //Re-emits all data, and can pipe to multiple folders
gulp.task (name,[,deps],fn); //Define a task implemented using Orchestrator task deps : an array containing a list of tasks, these tasks will be completed before your current task runs. Ensure asynchronous execution : use a callback, or return a promise or stream.
Tasks are executed with the largest number of concurrent operations in gulp. If you want to create a serialized task queue and execute it in a specific order, you will have to: give a prompt, tell when the task is completed, and tell the dependent task that you need to wait for the dependent task to complete.
gulp.watch (glob[,opts],tasks) or gulp.watch(golb[,opts,cb]); //Monitor files, when the file changes, return an EventEmitter to emit the change event. CB is the callback function and tasks is the list of callback tasks.
var watcher=gulp.watch('js/**/*.js',['default','reload']); watcher.on('change',function(e){console.log(e)});
gulp.watch('js/**/*.js',function(e){console.log(e)});
CLI (Command Line Interface) :
-v or --version Display the gulp version number installed globally or locally.
--require
--gulpfile
--cwd
-T or --tasks
--tasks-simple
--color
--no-color
--silent disable all gulp logs
GULP plugin :
gulp-load-plugins: automatically load plugins and automatically read the dependent plugins in package.json
gulp-rename: Rename the plugin
gulp-uglify: js file compression
gulp-minify-css: css file compression
gulp-minify-html: html file compression
gulp-jshint: js code inspection format
gulp-concat: file merge
gulp-less, gulp-sass: file compilation
and many more. . .
Summary :
Gulpjs is a front-end construction tool with simple configuration parameters and simple api. It uses nodejs stream to read and manipulate data, which is faster.
Configure based on NPM.