gulp概述和入门

     gulp作者是Eric Schoffstall，gulp是基于流的前端自动化构建工具,gulp采用了类似unix管道的方式将前一级操作的输出，作为后一级操作的输入,gulp运行依赖于node，它可以对javascript/coffescript/sass/less/css/html/image等文件进行语法检测，编译，合并，压缩，浏览器自动刷新，生成部署文件。

      gulp的作用有以下两点显而易见的好处：

      1、对网站静态资源进行优化，合并压缩文件,减少了http请求和文件加载的大小;

      2、开发完成之后，部署文件不用每次都重新手动操作，提高工作效率。

      gulp和另外一个工具grunt一样也可以实现自动化构建,grunt更多的是做配置，而gulp更多的是书写易于理解的脚本语言，相对grunt更直观，更易于理解。

      gulp官方介绍的一句话是：It should take in files,modify them,and output the new ones。即对开发完成即将部署的文件(静态文件)进行编译合并压缩，并生成新的文件。

      gulp提供关键的api有以下五个:

             gulp.task     指定执行的任务

             gulp.run      运行任务

             gulp.watch  监控文件变化

             gulp.src      指定源文件，支持模糊匹配和精确指定

             gulp.dest    指定目标文件

        gulp快速构建需要安装node,npm，gulp本身是一个可以运行的命令，因此需要全局安装，它还是一个依赖库，需要在当前项目中安装。gulp需要一个项目顶级目录下的一个gulpfile.js的文件，这个文件用来书写相关逻辑代码来实现对静态文件的优化。书写完成之后可以直接运行gulp，这样它会运行默认名为default的任务，这个任务中可以指定其他的任务，如果没有名为default的任务，只运行gulp命令会出错。也可以运行gulp taskname直接运行gulpfile.js中指定的任务。如果指定的任务不存在也会报错。

        gulp常用的库介绍：

              gulp-concat       ~文件合并

              gulp-clean-css ~css压缩

              gulp-sass          ~sass文件编译为css

              gulp-uglify          ~js压缩

              gulp-rename     ~文件重命名

              gulp-htmlmin    ~对html中的css,script等进行压缩,去除空格和注释

        以上对gulp进行了概述，下面结合实际来利用gulp来构建(项目中的示例文件均不是规范的完整的，都是临时写的一些)。

1、全局安装

$ npm install --global gulp

这样我们就可以在命令行下使用gulp命令来执行任务。

$gulp -v //检测是否安装成功

$ gulp -v
[10:07:04] CLI version 3.9.1
[10:07:04] Local version 3.9.1

2、新建一个项目，配置package.json文件，并安装依赖

{
  "name": "index",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "asyncawait": "^1.0.6",
    "bluebird": "^3.4.1",
    "body-parser": "~1.13.2",
    "express": "~4.13.1",
    "lodash": "~4.13.1",
    "moment": "~2.13.0",
    "mysql": "^2.11.1",
    "sequelize": "^3.23.4",
    "redis": "^2.6.2",
    "winston": "~2.2.0",
    "chance": "^1.0.4",
    "serve-favicon": "^2.3.0"
  },
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^2.0.13",
    "gulp-front-matter": "^1.3.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.1",
    "gulp-imagemin": "^3.0.3",
    "gulp-swig": "^0.8.0",
    "gulp-uglify": "^2.0.0",
    "gulp-useref": "^3.1.2",
    "gulp-rename": ""
  }
}

以上是我的package.json配置文件，这里引入了部分插件.

接着我们利用npm install --save-dev来安装项目依赖，包括项目依赖和构建依赖。

$ npm install --save-dev //这样就是在项目局部安装了依赖

安装之后项目下多了node_modules目录，这个目录下会有很多依赖包

3、第一个实例我们使用gulp-clean-css插件来对css进行压缩，这个其实就是去掉空格等。

var gulp = require("gulp");
var cleancss = require("gulp-clean-css");
gulp.task("compress",function(){
	gulp.src("public/src/css/*.css")
	.pipe(cleancss())
	.pipe(gulp.dest('build/css'));
});

准备文件如下：public/src/css目录下有两个文件reset.css public.css,build目录下暂时什么也没有，我们通过这个任务来对css文件进行压缩。

运行 gulp compress

hadoop@feiy-pc  /e/nodespace/hello
$ gulp compress
[10:25:40] Using gulpfile E:\nodespace\hello\gulpfile.js
[10:25:40] Starting 'compress'...
[10:25:40] Finished 'compress' after 15 ms

生成的文件如图所示：

生成的reset.css文件中样式都挤在了一行。

     4、再来运行一个任务，这个任务是利用concat和uglify插件来对js进行合并和压缩。  

var gulp = require("gulp");
var concat = rquire("gulp-concat");
var uglify = require("gulp-uglify");
gulp.task("jsmin",function(){
    gulp.src(["public/src/js/a.js","public/src/js/main.js"])
    .pipe(concat("all.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("build/js"));
});

      a.js

const names = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
function GetName(index){
	return names[index];
}
module.exports = GetName;

main.js

const a = require('./a');
console.log(a(0))

运行jsmin这个任务

$ gulp jsmin

$ gulp jsmin
[10:32:33] Using gulpfile E:\nodespace\hello\gulpfile.js
[10:32:33] Starting 'jsmin'...
[10:32:33] Finished 'jsmin' after 21 ms

生成的文件build/js/all.min.js

可以看到GetName中的变量index用a来代替了，而且代码少，都压缩在了一行。

最后贴上我的gulpfile.js的完整代码，这个代码

1、定义了一个删除文件的任务

2、定义了一个编译html的任务这是gulp中文社区的一个示例

3、定义了一个重命名js文件的任务

4、定义了压缩css的任务

5、定义了合并压缩js的任务

6、设置了默认任务执行的任务列表

var gulp =require("gulp");
var swig = require("gulp-swig");
var frontMatter = require("gulp-front-matter");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var cleancss = require("gulp-clean-css");
var concat = require("gulp-concat");

var del = require('del');
gulp.task('clean:mobile',function(cb){
	del(['build/page_error.html'],cb);
})
gulp.task("compile-page",function(){
	gulp.src("page.html")
	.pipe(frontMatter({property:'data'}))
	.pipe(swig())
	.pipe(gulp.dest('build'));
});
gulp.task("rename-js",function(){
	gulp.src("public/src/js/a.js")
	.pipe(gulp.dest('build'))
	.pipe(uglify())
	.pipe(rename({extname:'.min.js'}))
	.pipe(gulp.dest('build/js'));
});
gulp.task("compress",function(){
	gulp.src("public/src/css/*.css")
	.pipe(cleancss())
	.pipe(gulp.dest('build/css'));
});

gulp.task("jsmin",function(){
    gulp.src(["public/src/js/a.js","public/src/js/main.js"])
    .pipe(concat("all.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("build/js"));
});
gulp.task('default',["clean:mobile","compile-page","rename-js"]);