1.gulp装置
1.起首确保你已准确装置了nodejs环境。然后能够全局体式格局装置gulp：
$ npm install -g gulp我们能够检查一下gulp版本
$ gulp -v如许就完成了对全局的装置
2.假如想在装置的时刻把gulp写进项目package.json文件的依靠中，则能够加上–save-dev：
$ npm install --save-dev gulp个中--save-dev和--save的区分这里也有清晰的诠释
这实在在composer装置依靠包是一样的 一个存在
require一个存在require-dev
2.最先运用gulp
1.和其他的构建东西一样gulpjs也需要一个响应的设置文件gulpfile.js 实行
$ touch gulpfile.js2.起首是一个简朴的egulpfile.js内容:
var gulp = require('gulp');
gulp.task('default',function(){
// 将你的默许的使命代码放在这
});3.运转gulp
$ gulp要运转gulp使命，只需切换到寄存gulpfile.js文件的目次，然后在敕令行中实行gulp敕令就好了，gulp背面能够加上要实行的使命名，比方gulp task1，假如没有指定使命名，则会实行使命名为default的默许使命
这里默许的名为 default 的使命（task）将会被运转，然则这个使命并未做任何事情。
假如想要零丁实行特定的使命，请输入
gulp <task> <othertask>3.gulp API运用
gulp只需五个要领:task run watch src dest
1.gulp.src(globs[, options])
globs参数是文件婚配形式(相似正则表达式),他的范例是
String或Array,用来婚配文件途径(包含文件名)，固然这里也能够直接指定某个详细的文件途径。当有多个婚配形式时，该参数能够为一个数组。options为可选参数。平常情况下我们不需要用到。
我们这里简朴能够明白为这个要领就是读取你需要操纵的文件的
当有多个婚配划定规矩时 能够传入数组 如:
//运用数组的体式格局来婚配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])除此之外 数组还能够举行消除的婚配(ps:数组的第一个元素不能举行消除形式)
gulp.src([*.js,'!a*.js']) // 婚配一切js文件，但消撤除以a开首的js文件
gulp.src(['!a*.js',*.js]) //不会消除任何文件，由于消除形式不能涌现在数组的第一个元素中2.gulp.dest(path[, options])
简朴的说gulp.dest()是用来写文件的
path为写入文件的途径
options为一个可选的参数对象，平常我们不需要用到
gulp的运转流程大抵是如许的:
gulp的运用流程平常是如许子的：起首经由过程gulp.src()要领猎取到我们想要处置惩罚的文件流，
然后把文件流经由过程pipe要领导入到gulp的插件中，末了把经由插件处置惩罚后的流再经由过程pipe要领导入到gulp.dest()中，
gulp.dest()要领则把流中的内容写入到文件中，这里起首需要弄清晰的一点是，
我们给gulp.dest()传入的途径参数，只能用来指定要天生的文件的目次，而不能指定天生文件的文件名，
它天生文件的文件名运用的是导入到它的文件流本身的文件名，所以天生的文件名是由导入到它的文件流决议的，
纵然我们给它传入一个带有文件名的途径参数，然后它也会把这个文件名当作是目次名，比方：
var gulp = require('gulp');
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));
//终究天生的文件途径为 dist/foo.js/jquery.js,而不是dist/foo.js
经由过程指定gulp.src()要领设置参数中的base属性，我们能够更天真的来转变gulp.dest()天生的文件途径。
当我们没有在gulp.src()要领中设置base属性时，base的默许值为通配符最先涌现之前那部分途径，比方：
gulp.src('app/src/**/*.css') //此时base的值为 app/srcgulp.src()的bade属性能够在options里指定
gulp.src('client/js/**/*.js', { base: 'client' })
.pipe(minify())
.pipe(gulp.dest('build')); // 写入 'build/js/somedir/somefile.js'
gulp.src(script/lib/*.js, {base:'script'}) //设置了base参数，此时base途径为script
//假定婚配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build')) //此时天生的文件途径为 build/lib/jquery.js 我们能够如许明白:
上面我们说的gulp.dest()所天生的文件途径的划定规矩，实在也能够明白成，用我们给gulp.dest()传入的途径替换掉gulp.src()中的base途径，终究获得天生文件的途径。
3.gulp.task(name[, deps], fn)
name 为使命名(请不要在名字中运用空格)
deps 是当前定义的使命需要依靠的其他使命，为一个数组。当前定义的使命会在一切依靠的使命实行终了后才最先实行。假如没有依靠，则可省略这个参数
fn 为使命函数，我们把使命要实行的代码都写在内里。该参数也是可选的。
gulp中实行多个使命，我们的项目里一定会有处置惩罚相似css js images fonts 如许的静态文件的几个使命
能够经由过程使命依靠来完成。比方我想要实行one,two,three这三个使命，那我们就能够定义一个空的使命，然后把那三个使命当作这个空的使命的依靠就好了：
//只需实行default使命，就相当于把css,images,scripts这三个文件使命实行了
gulp.task('default',['css','images','scripts']);假如使命相互之间没有依靠，使命会按你誊写的递次来实行，假如有依靠的话则会先实行依靠的使命。
在处置惩罚所依靠的使命是异步的如许的运用场景也是有几种处理方案的：
4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
gulp.watch()用来看管文件的变化，当文件发生变化后，我们能够利用它来实行响应的使命，比方文件紧缩等。
glob 为要看管的文件婚配形式，划定规矩和用法与gulp.src()要领中的glob雷同。
opts 为一个可选的设置对象，平常不需要用到
tasks 为文件变化后要实行的使命，为一个数组
每当看管的文件发生变化时，就会挪用这个函数,而且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的范例，能够是added,changed,deleted；path属性为发生变化的文件的途径
gulp.watch('js/**/*.js', function(event){
console.log(event.type); //变化范例 added为新增,deleted为删除，changed为转变
console.log(event.path); //变化的文件的途径
});
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type);
});4.gulp 插件运用
1.自动加载 gulp-load-plugins
装置: npm install --save-dev gulp-load-plugins
在运用gulp插件时都需要require进来 而这个插件很好的处理了这个题目
gulp-load-plugins并不会一最先就加载一切package.json里的gulp插件，而是在我们需要用到某个插件的时刻，才去加载谁人插件。
由于gulp-load-plugins是经由过程你的package.json文件来加载插件的，所以必需要保证你需要自动加载的插件已写入到了package.json文件里，而且这些插件都是已装置好了的
下面这是一段一段很方便运用其他插件的load-plugins代码(实在就是婚配到package.json里的插件):
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/
});如许就能够经由过程 plugins.name()来运用我们的插件 举一个简朴的运用gulp-rename这个插件的例子
gulp.task('one',function () {
gulp.src(paths.styles.src+'/one.css')
.pipe(plugins.rename('new.css')) //而不必声明相似var rename = require('gulp-rename')
.pipe(gulp.dest(paths.styles.dest));
});2.重命名gulp-rename
装置：npm install --save-dev gulp-rename
var rename = require('gulp-rename');
//末了将src/styles/one.css 天生到 assets/styles/new.css
gulp.task('one',function () {
gulp.src('src/styles/one.css')
.pipe(rename('new.css'))
.pipe(gulp.dest('asstes/styles'));
});3.js文件紧缩 gulp-uglify
装置：npm install --save-dev gulp-uglify
var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
gulp.src('src/scripts/*.js') // 要紧缩的js文件
.pipe(uglify()) //运用uglify举行紧缩
.pipe(gulp.dest('assets/js')); //紧缩后的途径
});4.文件兼并 gulp-concat
装置：npm install --save-dev gulp-concat
var gulp = require('gulp'),
concat = require("gulp-concat")
uglify = require("gulp-uglify");
//假如src/scripts下有one.js two.js three.js 那末末了兼并到assets/js/all.js
gulp.task('concat', function () {
gulp.src('src/scripts/*.js') //要兼并的文件
.pipe(uglify()) //运用uglify举行紧缩
.pipe(concat('all.js')) // 兼并婚配到的js文件并命名为 "all.js"
.pipe(gulp.dest('assets/js'));
});5.less和sass的编译
装置：npm install --save-dev gulp-less npm install --save-dev gulp-sass
var gulp = require('gulp'),
less = require("gulp-less");
gulp.task('compile-less', function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('assets/css'));
});固然另有其他异常有效插件 gulp 插件库
