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"]);