一.环境准备

1.1 gulp介绍

• gulp是基于node.js 文件流的一个前端自动化构建工具，可以使用它构建自动化工作流程，简化工作量
• 官方定义：基于文件流的构建系统
• 核心文件：gulpfile.js和package.json
  • gulpfile.js：任务脚本
  • package.json：任务配置文件

1.2 安装gulp

npm install gulp -g

1.3 构建项目

• (1)切换到项目根目录(即 gulpfile.js 所在目录)，命令行安装任务所依赖的包：npm install
• (2)安装完成后，即可直接执行命令：gulp

二.使用实例 - 打包js和css

2.1 在 package.json中引用依赖gulp-minify-css和gulp-uglify

"devDependencies": {
	"del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-header": "^1.8.8",
    "gulp-minify-css": "^1.2.4",
    "gulp-replace": "^0.6.1",
    "gulp-uglify": "^1.5.4"
  }

2.2 定义我们第一个gulp流程

var pkg = require("./package.json");
var del = require("del");
var gulp = require("gulp");
var uglify = require("gulp-uglify");
var minify = require("gulp-minify-css");
var replace = require("gulp-replace");
var header = require("gulp-header");

// 定义任务
var destDir = "./dist" // 构建的目标目录
,note = [// 注释
  "/** <%= pkg.name %>-v<%= pkg.version %> <%= pkg.license %> License By <%= pkg.homepage %> */
 <%= js %>"
  ,{pkg: pkg, js: ";"}
]
,task = {
  minjs: function(){// 压缩 JS
    var src = [
      "./src/**/*.js"
      ,"!./src/config.js"// ! 表示不压缩该文件
    ];
    
    return gulp.src(src).pipe(uglify())// 使用压缩工具
     .pipe(header.apply(null, note))
    .pipe(gulp.dest(destDir));
  }
  
  ,mincss: function(){// 压缩 CSS
    var src = [
      "./src/**/*.css"
    ]
     ,noteNew = JSON.parse(JSON.stringify(note));
    noteNew[1].js = "";
    
    return gulp.src(src).pipe(minify({
      compatibility: "ie7"
    })).pipe(header.apply(null, noteNew))
    .pipe(gulp.dest(destDir));
  }
  
  ,mv: function(){// 复制文件夹
    gulp.src("./src/config.js")
    .pipe(gulp.dest(destDir));
    
    return gulp.src("./src/views/**/*")
    .pipe(gulp.dest(destDir + "/views"));
  }
};

// 清理工作
gulp.task("clear", function(cb) {
  return del(["./dist/*"], cb);
});

// 构建入口
gulp.task("default", ["clear", "src"], function(){
  for(var key in task){
    task[key]();
  }
});

2.3 构建输出

[13:31:17] Using gulpfile .xxxgulpfile.js
[13:31:17] Starting "clear"...
[13:31:17] Starting "src"...
[13:31:17] Finished "src" after 11 ms
[13:31:17] Finished "clear" after 57 ms
[13:31:17] Starting "default"...
[13:31:17] Finished "default" after 5.26 ms