使用前提条件

gulp是基于Nodejs的自动任务运行器，gulp依赖于nodejs，因此，在使用gulp之前需要先安装nodejs。这里略过安装说明。

gulp安装步骤

• 全局安装
  命令：npm install -g gulp
  全局安装是方便你直接使用gulp命令，为了通过它执行gulp任务，比如gulp文件gulpfile.js中执行各种任务：

// 监听任务
gulp.task('watch', ['default'], () => {
  gwatch(watch.static).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gwatch(watch.style).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gwatch(watch.scripts).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gulp.watch([watch.static, watch.style, watch.scripts], ['default']).on('error', err => console.log(err))
})

• 本地项目新建package.json文件
  命令行切换到当前项目文件夹。执行npm init,回车回车回车，生成package.json文件
  注：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。
• 本地项目安装gulp
  本地项目安装gulp因为之后需要安装的gulp插件需要依赖gulp，所以总个过程安装两次。
  本地项目执行命令： npm install gulp --save-dev
• 项目中安装使用其它Gulp插件
  安装我们需要gulp的插件，执行命令：npm install gulp-less gulp-watch gulp-concat gulp-minify-css --save-dev
  npm install babel-core babel-preset-env gulp-babel gulp-rename gulp-sass gulp-sequence gulp-watch --save-dev
  总结：安装完gulp等插件，package.json文件中：

{
  "name": "pintuan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp watch"
  },
  "repository": {
    "type": "git",
    "url": "git@10.150.13.12:donghui/pintuan.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.2.1",
    "gulp-sequence": "^1.0.0",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-watch": "^5.0.0"
  }
}

• 新建gulpfile.js文件
  在项目根目录下创建gulpfile.js文件，记住必须名字必须是gulpfile，gulpfile.js是gulp的配置文件，放于根目录中。

/*引入gulp及相关插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//压缩
gulp.task('minify-css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCss()) //执行编压缩功能
        .pipe(gulp.dest('dist/css/')); //输出文件位置
});
//
gulp.task('script', function () {
    gulp.src(['src/a.js',"src/b.js"])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
//合并上面两个任务
gulp.task('default',['minify-css','script']); 

gulp的任务API

主要API只有4个gulp.src()、gulp.dest()、gulp.task()、gulp.watch()。

• gulp.src()
  获取目标文件：gulp.src(['static//.js', '!static/module/.js'])
• gulp.dest()
  gulp的工作流程是通过src()获取指定路径下的文件流，通过pipe()导到某些gulp插件中处理，完成后通过pipe()导到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.task()
  gulp.task()是用来定义任务的，内部使用的是Orchestrator，一个以最大并发排列和运行任务和依赖的模块。
  gulp.task(name ，[deps] ，fn),参数说明：
  name : 任务名称
  deps: 依赖的任务，可以是多个。
  fn：任务的内容
  执行顺序：先执行依赖的任务，再执行当前的任务。

// 任务启动
gulp.task("default", function (cb) {
  if (compareDelete('./dist', './src')) {
    runSequence('static', 'style', 'scripts')(cb);
  }
});
// 监听任务
gulp.task('watch', ['default'], () => {
  gwatch(watch.static).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gwatch(watch.style).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gwatch(watch.scripts).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gulp.watch([watch.static, watch.style, watch.scripts], ['default']).on('error', err => console.log(err))
})

• gulp.watch()
  gulp.watch()是用来监听文件变化的，这样就可以在开发中实时监测文件的改动，然后自动做出相应的变化，比如压缩，其语法为:gulp.watch(glob ,[ opts], task)，参数说明：
  glob：文件路径。
  opts：是可配置参数，一般不用。
  task：监听变化后要执行的任务，是一个数组。

gulp.task('uglify',function(){  //do something});
gulp.task('reload',function(){  //do something});
gulp.watch('js/**/*.js', ['uglify','reload']); //当js发生变化，执行压缩等任务。

// 任务启动
gulp.task("default", function (cb) {
  if (compareDelete('./dist', './src')) {
    runSequence('static', 'style', 'scripts')(cb);
  }
});
// 监听任务
gulp.task('watch', ['default'], () => {
// 文件变化，先删除目标覆盖文件
  gwatch(watch.static).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gwatch(watch.style).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
  gwatch(watch.scripts).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
//文件变化，执行拷贝动作
  gulp.watch([watch.static, watch.style, watch.scripts], ['default']).on('error', err => console.log(err))
})
gulp.task('static', () => copyfile(watch.static))
gulp.task('style', () => styleBuild(watch.style))
gulp.task('scripts', () => scriptsBuild(watch.scripts))

//  watch为总的执行任务。

注：gulp.pipe：可以理解为管道，将操作加入到加入到执行队列。

执行gulp命令

（1）执行命令： gulp 任务名：如上面：gulp watch
（2）在package.json文件scripts中定义：

"scripts": {
 "build": "gulp watch"
}

然后执行：npm run build