我爱工程化 之 gulp 使用（一）

一、简介

gulp是前端自动化工具，压缩、合并、预编译检查等等，它与grunt频繁IO操作来消耗内存相比，它是使用的流的方式，我们可以简称为管道流（一端入，一端出，3通水，一个大桶，第一通在管道里面流吧，那边大桶接着，第一桶流完，第二桶水马上接上，直至三桶水全流完）

功能：

1、图片（压缩图片支持jpg、png、gif）

2、样式 （支持sass 同时支持合并、压缩、重命名）

3、javascript （检查、合并、压缩、重命名）
           4、html （压缩）
           5、客户端同步刷新显示修改
           6、构建项目前清除发布环境下的文件（保持发布环境的清洁）

为什么使用gulp比使用grunt快？

Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任        务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务...就这样反复下去。

Gulp是以stream为媒介的,它不需要频繁的生成临时文件，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，

二、步骤说明

1、安装nodejs；
    2、基于node.js安装并使用gulp
        * 全局安装gulp
        * 在项目的根目录下新建 package.json 文件
        * 在项目的根目录下安装gulp及相关需要的插件
        * 在项目根目录下新建gulpfile.js
        * 运行gulp任务（两种）

三、安装Node及简单命令介绍

1.安装node.js      http://nodejs.org/

* 命令: cmd:
         * node -v查看安装的nodejs版本
         * npm  -v查看npm的版本号

* 使用npm安装插件
           * npm install <name> [-g] [--save-dev]
             * <name>：node插件名称。例：npm install gulp-less --save-dev
             * -g：全局安装:将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；
                      非全局安装:将会安装在当前定位目录全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
             * --save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
             * -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

* 思考:为什么要保存至package.json？
           因为node插件包相对来说非常庞大，所以不加入版本管理，
           将配置信息写入package.json并将其加入版本管理，
           其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。

*使用npm卸载插件：npm uninstall <name> [-g] [--save-dev] PS：不要直接删除本地插件包

*使用npm更新插件：npm update <name> [-g] [--save-dev]

*查看npm帮助：npm help

* 当前目录已安装插件：npm list

* npm安装插件过程：从国外网站下载对应的插件包，有时候会很慢
           解决办法用cnpm 镜像安装，用法同npm

npm install cnpm -g --registry=https://registry.npm.taobao.org

四、安装gulp

1.：全局安装

* 运行node命令: npm install -g gulp 或 cnpm install gulp –g

* 说明: 全局安装gulp目的是为了通过她执行gulp任务

* 查看是否正确安装（命令: gulp –v 【出现版本号即为正确安装】）

2.在项目的根目录下新建 package.json 文件

         方式一：命令式

* 命令: npm init

* 说明: 会在根目录下，自动生成一个package.json文件，它是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件

它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

方式二：手动式

手动创建一个package.json文件，注意：json文件内是不能写注释的，复制下列内容请删除注释

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

3.本地安装（即在项目的根目录下安装）

         * 进入项目根目录，

* 输入命令: npm install gulp --save-dev

* 说明: 全局安装gulp是为了执行gulp任务，项目安装gulp是为了调用gulp插件的功能。

4.在项目根目录下新建gulpfile.js 文件

* 说明: gulpfile.js是gulp项目的配置文件,它是gulp的主文件，在gulpfile.js文件中定义相关任务。

* 1.引入gulp及组件

* 2.配置开发和发布路径
         * 3.为每个插件的运行编写一个task
         * 4.建立默认task（将所有插件任务引入）
         * 5.建立监听(监听所有任务)
         * 6.执行任务
         * 默认:执行所有任务 命令: gulp
         * 单个:例如清空文件夹任务 命令: gulp clean

！！！！注意：根据需要配置要清空的文件夹及文件的相关路径 ！！！！

简单的示例

   //导入工具包 require('node_modules里对应模块')
   var gulp = require('gulp'), //本地安装gulp所用到的地方
       less = require('gulp-less');
   //定义一个testLess任务（自定义任务名称）
   gulp.task('testLess', function () {
       gulp.src('src/less/index.less') //该任务针对的文件
           .pipe(less()) //该任务调用的模块
           .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
   });                                                                                          

   gulp.task('default',['testLess', 'elseTask']); //定义默认任务                                

   //gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
   //gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)
   //gulp.dest(path[, options]) 处理完后文件生成路径  

5运行gulp任务

       * 命令: gulp default或gulp

* Webstrom: 右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可。
       * 说明: 要运行gulp任务，只需切换到存放gulpfile.js文件的目录
                  gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。

五、根据需求下载相应的插件包

      安装命令:

           npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr            --save-dev

1.Css类

* gulp-minify-css : 压缩css

* gulp-less : 支持less
         * css文件引用URL图片加版本号(gulp-make-css-url-version);
         * 编译Sass,生成雪碧图(gulp-compass);
         * 编译sass(gulp-sass);
         * sass浏览器地图(gulp-sourcemaps);
     2.图片类
         * 图片压缩(gulp-imagemin);
         * 缓存通知(gulp-cache);
     3.JS类
         * JS语法检测(gulp-jshint);
         * JS丑化(gulp-uglify);
     4.html类
         * 压缩html(gulp-htmlmin)
         * html文件引用加版本号(gulp-rev-append);
     5.文件类
         * 文件合并(gulp-concat);
         * 重命名文件(gulp-rename);
         * 清空文件夹(gulp-clean);
         * 更新通知(gulp-notify);
     6.web服务类
         * gulp-connect
         * gulp-livereload: 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）

六、gulp API

     使用gulp，仅需知道4个API即可：gulp.task(),  gulp.src(),  gulp.dest(),  gulp.watch()

* gulp.src()
        * 用来获取需要操作的文件流
        * 使用Nodejs中的stream(流)，首先获取到需要的stream，然后通过stream的pipe()方法把流导入到你想要的地方，
     * gulp.src(globs[, options])

* 输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中

       例:
           gulp.src('client/templates/*.jade')
                 .pipe(jade())
                 .pipe(minify())
                 .pipe(gulp.dest('build/minified_templates'));

这一边主要是讲解用法，下一篇，直接上project，更直观。