gulp 学习笔记

以这次学习gulp为契机来同时了解和学习node相关的知识和概念，比如 npm，package.json等，为以后学习node打好基础。

目录

  npm

    查看模块

    安装模块

    卸载模块

    更新模块

    搜索模块

    npm配置

    查看版本

    帮助

  package

    创建package.json

    package.json的标准格式

    依赖下载

  gulp

    安装gulp

    gulpAPI

        src

        dest

        task

        watch

    gulpfile

  使用sublime运行gulp

  最后

npm

npm (Node Package Manager) 它是Node的包管理器与分发工具，又因为Node是基于JavaScript的语法格式，所以又被称之为JavaScript的包管理器。

npm 用于管理Node的模块以及插件，例如模块或者插件的安装，更新，搜索，卸载等。

npm 默认与Node绑定在一起的，所以安装Node，自然就安装了npm。

npm 的官网:https://www.npmjs.com/

PS: npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），因此建议设置镜像站点或者是使用淘宝提供的镜像包管理器 

cnpm

查看模块

列出当前目录的包

npm list           

列出全局安装的包

npm list -g            

精简信息显示

npm list -g --depth=0           

安装模块

本地安装

npm install gulp --save-dev           

--save： 将该模配置信息保存至 

package.json

 文件中的Dependencies属性内。

-dev : 指明将配置信息保存至 

package.json

 文件中的的 

Devdependencies

 内。

全局安装

npm install gulp -g           

安装指定版本号的模块

npm install [email protected]           

总的来说，使用npm安装一个模块或插件，其格式如下：

npm install <packageName[@version]> [-g] [--save-dev]           

卸载模块

卸载本地模块

npm uninstall rimraf            

卸载全局模块

npm uninstall gulp -g           

删除模块并卸载配置信息

npm uninstall rimraf --save-dev           

总的来说，卸载模块的格式：

npm unistall <packageName[@version]> [-g] [--save-dev]           

更新模块

模块的更新与模块的安装和卸载在使用上格式相同

npm update [packageName] [-g] [--save-dev]           

如果你要更新所有的插件的话

npm update [--save-dev]           

搜索模块

当我们发布一个自己创建的模块或包时，就要去搜索远程仓库是否已经有存在相关的命名。

npm search <packageName>           

npm配置

如果想查看当前npm的配置参数，可以使用一下命令

npm config list -l           

通过 

config

 命令也可以自定义某些npm的功能参数。

其中常用的有，重新设置代理，重新设置模块的下载地址。

例如因为公司的防火墙原因，无法完成任何模块的安装，这个时候设置代理可以解决

npm config set proxy=http://proxy.com           

又如国内的网络环境问题，某官方的IP可能被和谐了，幸好国内有好心人，搭建了镜像，此时我们简单设置镜像

npm config set registry="http://r.cnpmjs.org"           

最后也可以安装的淘宝镜像包管理器

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

查看版本

npm -v           

帮助

可以通过 help 来查看相关命令的文档

npm help list           

package

package.json

 是一个JSON文件，它既可以用于说明当前模块的相关配置信息，也可以指明我们安装时所需要的依赖模块。

创建package.json

npm init           

通过引导的方式在当前模块下创建 

package.

 文件。

npm init --yes           

如果不想根据引导创建 

package.json

 也可以使用该命令直接创建。

package.json的标准格式

一个标准的 

package.json

 文件内容如下：

{
  "name": "st",
  "version": "1.0.1",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "rimraf": "2.6.1"
  },
  "scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
  },
  "keywords": [],
  "author": {
    "name": "gtshen",
    "email": "[email protected]"
  },
  "contributors": [{
    "name": "",
    "email": ""
  }, {
    "name": "",
    "email": ""
  }, {
    "name": "",
    "email": ""
  }],
  "engines": {
    "node": "0.10.x"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/shenguotao2015/st.git"
  },
  "bugs": {
    "url": "",
    "email": ""
  },
  "homepage": "http://st.cn"
}           

name

name用于定义模块或者包名，它是package.json中非常重要的属性之一。

如果你向npm提交这个模块时，你必须保证name的名称是唯一的。

version

用于设置模块的版本号。在package.json中最重要的就是name和version字段了。

description

描述内容，值为一个字符串。用于方便 

npm search

 进行搜索。

keywords

关键字。值可以为一个字符串也可以是一个数组。用于方便 

npm search

keywords:'keywords content' 
keywords:['k1','k2']           

homepage

项目官网的url。

目前在我们的项目目录中只安装了两个模块，不过包的数量会增长的非常快。手动安装依赖是非常不明智的，所以可以在项目目录中用 package.json 文件来管理它们。通过 nmp init 命令可以创建。

bugs

用于指明反馈bug的方式。

license

许可证，用于说明该模块受到何种保护以及授权人具有哪些权利。

关于选择何种许可证，可以见下图：

author

作者

contributors

协助开发的相关人员，值是一个数组。

repository

指定一个代码存放地址。

main

用于指定该模块的入口的文件，这个入口文件一般都是模块根目录下的js文件，例如：

index.js

。

后期，在我们使用该模块时，例如:

require('st')

就是加载的这个 

index.js

文件。

{
    "name":"st",
    "version":"1.0.1",
    "main":"index.js"
}           

engines

engines用于说明该模块需要依赖的node版本。

scripts

scripts 可以为当前模块自定义一些脚步动作或命令。

{
    "scripts": {
        "preinstall": "echo here it comes!",
        "postinstall": "echo there it goes!",
        "start": "node index.js",
        "test": "tap test/*.js"
      }
}           

如上所示，现在就可以在该模块内执行如下命令

node postinstall
node start
node test           

dependencies

dependencies是一个对象，用于声明该模块所依赖的模块列表，其中key是模块的名称，value则是模块的版本。

其中版本常用的书写格式有：

version 精确匹配版本
>version 必须大于某个版本
>=version 大于等于
<version 小于
<=versionversion 小于
~version "约等于"，具体规则详见semver文档
^version "兼容版本"具体规则详见semver文档
1.2.x 仅一点二点几的版本
range1 || range2 范围1和范围2满足任意一个都行           

{
    "dependencies":{
         "foo":"3.0.1"
        ,"baz" : ">1.0.2 <=2.3.4"
        ,"boo" : "2.0.1"
        ,"qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
        ,"til" : "~1.2"
        ,"two" : "2.x"
    }
}           

devDependencies

它的功能与 

dependencies

 相同。

不同的是 

devDependencies

 只用于声明开发环境的依赖列表，而

dependencies

则是用于声明正式环境的依赖列表。

如果有人想要下载并使用你的模块，也许他们并不希望或需要下载一些你在开发过程中使用的额外的测试或者文档框架。在这种情况下，最好的方法是把这些依赖添加到devDependencies属性的对象中。

依赖下载

总的来说，package.json中用于保存模块的配置信息，其中最重要的就是 

name

 与 

version

 这两者的组合用于唯一标示该模块。其次，如果模块有依赖其它模块的情形，则可以按照所依赖的类型，比如开发环境与正式环境的不同有区分的将信息写入 

devDependencies

 和 

dependencies

 中。

同理，如果有人使用到了你的模块，那么他在本地执行：

npm install            

则可以直接将 

devDependencies

 中的依赖下载到本地，如果在正式环境，他可以使用

npm install -production           

将

dependencies

 中的信息下载到正式环境中。

gulp

1.简介

gulp属于前段自动化工具中的构建工具，我们使用gulp主要用于资源的压缩合并与优化，除此之外gulp还具有一些很实用的功能，比如 sass的编译、本地WEB服务的搭建、浏览器自动刷新以及文件的更改监听。

2.概念

gulp的核心概念是 "流"。你可以理解成类似于一个流水线作业，文件流在被管道方法(pipe)接收后可以被其回调函数进行操作处理，操作完成后，可以依次被下个管道方法接收处理，因此管道方法就好比是每个作业的环节。

gulp这种“流”的操作相比 

grunt

 等其它构建工具，要大大的减少了频繁的 

I/O

 操作，并且在代码的书写上也可以用与 

Jquery

 相同的链式写法。

3.特点

易于使用

通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。           

构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。           

易于学习

通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。           

插件高质

gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。           

4. 准备

在使用gulp之前，我们一般会在本地新建好要开发项目的目录。

新建好项目后，在该项目的根目录，我们可以自己选择是否要创建 

package.json

 文件，如果你打算将自己配置好的gulp功能与它人分享，那么便需要建立该文件。通过 

npm init --yes

 直接创建一个 

package.json

 的文件。然后我们编辑好基本的 

name

version

 既可。

这里我贴出自己平常开发时的项目目录结构：

|- productName
    |- assets
        |- css
        |- js
        |- images
        |- index.html
    |- productName
        |- css
        |- js
        |- images
        |- index.html
    |- node_modues
    |- gulpfile.js
    |- package.json           

其中 

assets

 是我们开发时使用的目录，而项目里面相同的 

productName

 则是我们通过gulp编译的目录或者是叫分发目录。

再贴出 

package.json

 文件的内容

{
    "name":"productName",
    "version":"v1.0.0"
}           

安装gulp

gulp的安装要经过两个步骤：

• 全局安装：用于可使用gulp命令。
• 本地安装：用于载入gulp的依赖以及工具包。

首先全局安装：

npm install -g           

此时gulp便会被安装到 

"C:\\Users\\Administrator\\AppData\\Roaming\\npm\gulp

想验证是否安装完成，在终端中执行下面的命令：

gulp -v           

看看有没有打印出对应的信息，如果有，说明gulp安装成了，现在可以调用gulp的命令。

最后，我们再到自己项目中，然后本地安装gulp

cd d:/work/gulp
npm install gulp --save-dev           

本地此时便会建立一个 

node_modules

 的文件夹，文件夹里面存放的就是gulp本身以及它所依赖的其它模块。

gulpAPI

gulp的API很少,所以我们可以很轻松快速的掌握gulp的基本用法。

src

格式: gulp.src(sources,options)

功能：读取源文件，并默认将文件以流的形式载入，供管道方法(pipe)使用加工。

说明：

sources:资源文件的路径，可以是字符串，也可以是包含多个资源文件的数组。

示例:

gulp.src('assets/**/*.js')
gulp.src(['assets/**/*.js','!assets/js/index.js']);           

仔细的你想必已经发现了上面的url值，有 

*,!

 等符号，这些符号叫做 “通配符”，在 

uninx

时代就已经沿用在文件管理系统中，其功能与含义与正则也很相似，具体的含义与功能如下：

1. *.scss：号匹配当前目录任意文件，所以这里.scss匹配当前目录下所有scss文件
2. */.scss：匹配当前目录及其子目录下的所有scss文件。
3. !not-me.scss：！号移除匹配的文件，这里将移除not-me.scss
4. *.+(scss|sass)：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

options: 

.src()

 方法的附加选项。值是一个对象，具体参数如下：

属性	默认值	说明
buffer	false	值为false表示当前的文件以流的形式载入，如果为true，则以buffer的方式存储
read	true	是否读取文件，如果值为false 则不读取资源文件，file.contents 返回null
base	string	用于设置与 dest 相结合的输出目录。

注意：

buffer

stream

 的文件表现方式有很大的不同，

stream

 是在 

buffer

的基础上再次封装，它不要求一次性的读取与装载文件，而是以流的形式处理，而

buffer

则类似于一种对象结构的数组，用于存储当前文件的所有二进制数据，当然，这些知识理论都是属于nodeJS的，对于我们这些非后台的gulp使用者，应当认识到gulp的插件在对文件的处理上，分为 

buffer

stream

 两种形式既可。

base 的值用于与 

gulp.dest()

 结合使用确定输出文件的位置，我们知道 

gulp.src

 用于输入文件，而 

gulp.dest

 用于输出文件，在默认状态下，base 的值就是 

gulp.src

 中资源文件路径中通配符之前的部分，当我们输出文件时 

gulp.dest(path)

 dest 就会让 path 去覆盖 base的值，这样便能确定输出文件的位置了。

可见示例:

如果现在 

script/js/

 目录下有一个index.js文件。那么：

gulp.src('script/js/*.js') // 此时base的值默认的就是 script/js/
.pipe(gulp.dest('build'))  // 输出时，build会覆盖base，那么输出的位置就是 build/index.js

//效果如下相同
gulp.src('script/**/*.js',{'base':'script/js/'})
.pipe(gulp.dest('build'))           

如果是这样呢？

gulp.src('script/**/*.js',{'base':'script'})  //此时base的值为script
.pipe(gulp.dest('build')) //当用 build 覆盖 base时，输出的位置也就是 build/js/index.js           

dest

格式: gulp.dest(path,options)

功能： 将管道(pipe)中的文件流以文件的形式重新写入到指定的目录。如果该目录不存在，则会创建目录

path：要输出的路径。值可以是单纯的路径url，也可以是一个处理函数(function)

options：

gulp.dest()

 方法的的选项参数，值是一个对象object。

cwd		输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。
mode	string:0777	八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

task

格式: gulp.task(taskName[,deps],fn)

功能： 创建gulp任务，执行相应功能。gulp创建的任务，可以在命令行中使用 

gulp taskName

 形式执行。如果 taskName 为 default，那么则可以直接运行 

gulp

taskName:任务名称。

deps：一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

fn：任务的处理函数。

watch

格式： gulp.watch(sources,callback)

作用： 监视文件，并且可以在文件发生改动时候做一些事情。

sources：文件文件的路径url，取值可以是String，也可以是保存多个资源文件路径的数组Array。其功能就是监控指定文件的更改。

callback:文件更改时执行的操作，值可以是预先定义好的task，也可以时自定功能的function。

gulp.watch(config.src + '/**/*.+(scss|sass|html|css|js)',['build']);           

gulpfile

gulpfile.js

 里面存储的就是执行gulp时运行的主要逻辑。

sass编译

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

gulp.task('sass', function() {
    return gulp.src('assets/**/*.+(scss|sass)')
        .pipe(sass({
            "outputStyle": "expanded"
        }))
        .pipe(gulp.dest('gulp-test'))
});           

web服务器与自动刷新

var gulp = require('gulp'),
    browserSync = require('browser-sync');
    
gulp.task('browserSync', function() {
    browserSync({
        "server": {
            "baseDir": config.dest
        }
    });
});
gulp.task('reload', function() {
    browserSync.reload();
});           

监听文件改动

gulp.task('watch',function(){
    gulp.watch('assets/**/*.+(scss|sass)',['sass']);
})           

CSS压缩

var gulp = require('gulp'),
    cleanCSS = require('gulp-clean-css');

gulp.task('cssMini', function() {
    return gulp.src('assets/css/*.css')
        .pipe(cleanCSS({
            advanced: false, 
            compatibility: 'ie7',
            keepBreaks: false, 
            keepSpecialComments: '*' 
        }))
        .pipe(gulp.dest('gulp-test/css/'))
});           

advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]

compatibility: 'ie7', //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

keepBreaks: false, //类型：Boolean 默认：false [是否保留换行]

keepSpecialComments: '*' //保留所有特殊前缀当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀

JS压缩

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

gulp.task('jsMini', function() {
    return gulp.src('assets/js/*.js')
        .pipe(uglify({
            mangle: true, //类型：Boolean 默认：true 是否修改变量名
            compress: true, //类型：Boolean 默认：true 是否完全压缩
            preserveComments: 'all' //保留所有注释
        }))
        .pipe(gulp.dest('gulp-test/js/'))
})           

说明:

mangle: 用于选择是否压缩变量名，如果为false则不压缩变量名，默认值为true。它也可以接收一个对象作为值，来自动以过滤那些指定的变量名。

{"mangle": {except: ['require' ,'exports' ,'module' ,'$']}}

图片压缩优化

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache');
    
gulp.task('imageMini', function() {
    return gulp.src('assets/images/*.+(jpg|png|svg|gif)')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest('gulp-test/images/'))
});           

打版本号

var gulp = require('gulp'),
    rev = require('gulp-rev');
    
gulp.task('rev', function() {
    return gulp.src('assets/**/*.*')
        .pipe(rev())
        .pipe(gulp.dest('gulp-test'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('gulp-test/rev/')) //生成配置文件，用于记录原文件与打版本后的对应关系，方便在以后再html中进行连接的替换。
})           

合并、压缩、打版本号、替换链接

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    notify = require('gulp-notify'),
    cleanCSS = require('gulp-clean-css');

//合并、压缩、打版本号
gulp.task('concat', function() {
    return gulp.src(['assets/css/index.css', 'assets/css/style.css'])
        .pipe(concat('main.min.css')) //合并为main.min.css
        .pipe(cleanCSS()) //压缩mainCSS
        .pipe(rev({
            'replaceReved':true,
            'dirReplacements':{
                'css': 'css',
                'js': 'js',
                'img': 'img'
            }
        })) //为main.min.css 打版本
        .pipe(gulp.dest('gulp-test/css/')) //生成到指定目录
        .pipe(rev.manifest()) //创建rev配置文件
        .pipe(gulp.dest('gulp-test/css/rev/')) //将配置文件生成到指定目录。
        .pipe(notify({
            message: 'concat minicss rev complate'
        }))
});

//替换资源路径
gulp.task('revCollector', function() {
    return gulp.src(['assets/*.html', 'gulp-test/css/rev/*.json']) //指定要替换连接的文件以及对应的配置文件。
        .pipe(revCollector()) //开始替换
        .pipe(gulp.dest('gulp-test')) //重新生成替换好练级后的文件。
});           

replaceReved：设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false

dirReplacements：标识目录替换的集合, 因为gulp-rev创建的manifest文件不包含任何目录信息, 上面的例子将得到下面的替换结果

"/css/style.css" => "/dist/css/style-1d87bebe.css"
"/js/script1.js" => "/dist/script1-61e0be79.js"
"cdn/image.gif"  => "//cdn8.example.dot/img/image-35c3af8134.gif"           

实际上就是将你指定的目录信息与 

manifest.json

 文件中的对应信息进行拼接，实现可自定义目录。

替换链接-注释法

此种方式实现的功能与上面相同，但是它有一个特点，那就是无需生成 

manifest.json

 的对应文件，也不需要要是用 

collector

 去更改文件中的资源名称或者是路径，但是却需要开发者在html或者其他页面文件中，通过特定的注释格式，去说明合并的类型以及要合并到那个文件中。

其注释格式如下：

<!--build:<type> path/fileName -->
...
<!--endbuild-->           

其中

type

就是编译的类型，主要有css，js，而

path

则是路径参数，

fileName

 就是最终合并到的新文件。

具体示例：

<!--build:css css/main.min.css -->
    <link type="stylesheet" href="a.css" />
    <link type="stylesheet" href="b.css" />
    <link type="stylesheet" href="c.css" />
<!--endbuild-->


<!--build:js js/main.min.js -->
    <script src="a.js" ></script>
    <script src="b.js" ></script>
    <script src="c.js"></script>
<!--endbuild-->           

具体的gulp代码：

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpIf = require('gulp-if'),
    cleanCSS = require('gulp-clean-css'),
    uglify = require('gulp-uglify');
    
gulp.task('useref', function() {
    return gulp.src('assets/**/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.css', cleanCSS()))
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulp.dest('gulp-test'))
});           

那么，如果你只想压缩，而并不想合并，那该怎么办呢？

其实很简单

//只压缩不合并
<!--build:css css/a.min.css -->
    <link type="stylesheet" href="a.css" />
<!--endbuild-->

//即压缩也合并
<!--build:css css/a.min.css -->
    <link type="stylesheet" href="b.css" />
    <link type="stylesheet" href="c.css" />
<!--endbuild-->           

删除

gulp的删除一般用于当我们生成新的文件时，去清除旧的文件。

实际上再我们重新生成文件时，基本上都可以自动覆盖。

gulp.task('clean',function(){
    del(['gulp-test/images/','!gulp-test/css/'])
})           

定义运行队列

gulp的任务都是异步执行的，一般我们无法控制执行顺序，但是通过使用requence模块，我们就可以很轻易的控制gulp任务的执行顺序。

var gulp = require('gulp'),
    notify = require('gulp-notify'),
    sequence = require('run-sequenc');
    
gulp.task('task1',function(){
    notify({message: 'task - one'})
})
gulp.task('task2',function(){
    notify({message: 'task - two'})
})
gulp.task('task3',function(){
    notify({message: 'task - thr'})
})

gulp.task('sequence',function(){
    sequence('task1','task2','task3');
})
           

打通管道

我们知道gulp中文件以“流”的形式在管道(pipe)中传输，如果有个需求需要读取文件的相关信息以及对文件进行某些操作，那么打通管道，读取文件就是我们必须要进行的工作。

之前我们有一个插件 

gulp-if

 它也有类似的功能，但是它已经被固化，只能用来判断格式，而这里我们可以通过 

gulp-tap

这个插件可以实现更自由化的管道操作。

var gulp = require('gulp'),
    tap = require('gulp-tap'),
    path = require('path');

gulp.task('tap',function(){
    gulp.src('assets/**/*.html')
    .pipe(tap(function(file,t){
        console.log(path.extname(file.path)); //文件扩展名
        console.log(path.basename(file.path)); //文件名。
    }))
})           

使用sublime运行gulp

在平常开发中，如果我们一边在编辑器中编写代码，另一边还要打开终端（命令行工具）然后去执行gulp任务，这种方式效率肯定是很低的，使用上也有断开感，为了提高效率以及连续性，我们可以直接在编辑器中运行gulp任务。这里以 

sublime

为例来加以说明。

首先，打开 sublime 快捷键 

ctrl+shift+p

 选择 

install package

 然后输入 

Gulp

 安装Gulp 插件。

接着，

首选项 - 浏览器插件目录 - Gulp

 在其中找到 

Side Bar.sublime-menu

 文件，将以下内容拷贝覆盖进去

[
    {
        "caption": "Gulp",
        "children":
        [
            { "caption": "运行默认的任务", "command": "gulp", "args": { "task_name": "default", "paths": [] } },
            { "caption": "运行任意的任务", "command": "gulp_arbitrary", "args": { "paths": [] } },
            { "caption": "运行最后的任务", "command": "gulp_last", "args": { "paths": [] } },
            { "caption": "-" },
            { "caption": "列出要运行的任务","command": "gulp", "args": { "paths": [] } },
            { "caption": "删除缓存","command": "gulp_delete_cache", "args": { "paths": [] } },
            { "caption": "结束所有的gulp任务", "command": "gulp_kill" },
            { "caption": "结束特定的gulp任务", "command": "gulp_kill_task" },
            { "caption": "-" },
            { "caption": "插件列表","command": "gulp_plugins" }
        ]
    }
]           

这样便可以汉化 gulp 的侧边栏菜单。

最后，打开我们本地具有gulp的项目目录，在sublime的侧边栏找到 

gulpfile.js

文件，并对其右击选择 

Gulp

选项，在其中便可以选择执行gulp相应的命令。

其中常用的选项有：

运行默认的任务：运行 default 任务
运行任意的任务：自己输入相应的gulp任务。
列出要运行的任务：手动选择要执行的gulp任务。
插件列表：可以看到与gulp相关的插件模块。           

使用sublime执行gulp任务，一定要确保具有 

nodeJS

 环境，其次就是本地存在 

gulpfile.js

如果你感觉右击很麻烦，也可以自己定义快捷键。

依次打开 

首选项

 - 

快捷键设置

Default (Windows).sublime-keymap

，在其中放入以下配置代码。

{
    "keys": ["ctrl+alt+p"],
    "command": "gulp_plugins"
}, {
    "keys": ["ctrl+alt+o"],
    "command": "gulp",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+;"],
    "command": "gulp_last",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+h"],
    "command": "gulp_delete_cache",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+l"],
    "command": "gulp_arbitrary",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+k"],
    "command": "gulp_kill"
}, {
    "keys": ["ctrl+alt+j"],
    "command": "gulp",
    "args": {
        "task_name": "default",
        "paths": []
    }
},           

最后

目前gulp在公司里面也刚开始应用，这次学习也只是掌握了gulp的常用功能，虽然可以满足基本的工作需求，但是我个人感觉还缺少了一个统一可配置的 

gulpfile.js

文件，我打算等以后随着gulp使用的更频繁也更为熟练的时候，自己封装一个可以统一应用在任何工作上的gulpfile文件。

参考资料：

https://www.w3ctrain.com/2015/12/22/gulp-for-beginners/

http://www.cnblogs.com/fengyuqing/p/5332112.html

http://jingyan.baidu.com/article/48206aeaa42b63216bd6b372.html