前端自动化Gulp工具初识总结

Gulp与Grunt类似，也是一款构建工具，它能够自动执行我们前端常见的任务，比如编译Less、Sass，压缩JavaScript和刷新浏览器等等，以此来改进前端的工作方式，提高生产力。

gulp logo

安装Node.js

由于Gulp是基于Node.js构建的，所以在使用Gulp之前，首先安装好Node.js。
[下载地址：http://nodejs.cn/]
安装Node.js方式非常简单，下载后运行安装包，一直下一步即可，安装完成后打开cmd控制台(Windows下)，输入node -v查看版本号，确认Node.js安装完毕。
安装过Java JDK的都知道，需要手动配置环境变量，而Node.js在安装时已经配置好，无需手动配置。

由于npm服务在国外，通过npm安装一些东西可能无法请求到，可以使用淘宝npm镜像，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。安装如下：

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

安装完成以后可以使用cnpm代替npm命令。

注：本文所有的命令都基于控制台操作，windows使用cmd控制台，而不是Node.js控制台。

初始化项目

让当前目录作为项目文件夹进行初始化，初始化完毕以后，会有一个package.json文件，里面是描述项目的一些记录，包括项目名称、作者、开发时使用的一些插件。后面会用到--save-dav命令，把插件信息保存在devDependencies属性中。

项目初始化命令如下：

$ npm init    //初始化当前项目

不初始化也可以使用gulp。

Package.json 属性说明

name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
devDependencies -开发环境依赖的包列表。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫 express，然后用户安装它，然后require("express")。
keywords - 关键字

安装Gulp

在CMD控制台下输入以下命令进行Gulp的安装。-g代表的是全局安装。

$ npm install -g gulp

全局安装完成后，要想使用在某个项目（文件夹）中，用cd命令切换到项目文件夹后，再次使用以下命令，使当前项目文件夹使用gulp文件。--save-dav命令，会将项目依赖（使用）的插件信息记录在package.json中。

$ npm install gulp --save-dev

这里2次安装命令一定有疑惑的地方，第二次安装是因为当项目中需要使用的时候去安装它，这样灵活性比较高，如果不安装，就代表该项目不需要它。

使用Gulp

在与package.json同级的目录下手动创建一个gulpfile.js文件，目录结构如下。

项目文件夹
　|-package.json
　|-gulpfile.js

在gulpfile.js中可以开始设置gulp流程，一个最简单的例子。

var gulp = require('gulp');  //载入gulp
gulp.task('default', function() {
 // 将你的默认的任务代码放在这
});

task方法中第一个参数是任务的名称，default代表是gulp命令默认执行，function中则是执行的任务。
在控制台调使用gulp并不加任何参数，代表执行default任务。

$ gulp      // 执行default任务

Gulp API

在进阶Gulp时，必须熟悉API中的四个方法的使用，在这里简单概括一下，更多信息查阅API。

gulp.src(globs[, options])
返回符合匹配规则的虚拟文件对象流(Vinyl files)。
gulp.dest(path[, options])
用来指定要生成的文件的目录，目录路径为path。
gulp.task(name[, deps], fn)
定义一个流任务，任务名为name。
gulp.watch(glob[, opts], tasks)
监视文件的变化，执行操作。

实例

一个压缩js的实际例子。

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
gulp.task('uglify', function () { 
  gulp.src('js/appCode.js') 
      .pipe(uglify()) 
      .pipe(gulp.dest('build'));
});

首先加载gulp和gulp-uglify代码压缩插件。

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

然后定义一个uglify任务，调用uglify会执行function中的代码。

gulp.task('uglify', function () { 
   //执行任务
   gulp.src('js/appCode.js') 
       .pipe(uglify()) 
       .pipe(gulp.dest('build'));
});

到此gulp初识结束，常见的任务依赖以及各种插件使用等知识可以查阅更多的资料来学习。