Gulp入门教程之一 Gulp的安装与配置-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

1. 什么是gulp

gulp是前端自动化项目的构建利器，开发过程中对代码做构建的一个很方便的工具，不但可以对网站资源进行优化，而且我们在开发过程中的一些很重复性的任务可以使用gulp工具自动来完成，比如:

把文件从开发目录拷贝到生产目录
把多个 JS 或者 CSS 文件合并成一个文件
对JS文件和CSS进行压缩
把sass或者less文件编译成CSS
压缩图像文件
创建一个可以实时刷新页面内容的本地服务器

只要你觉得有些动作是要重复去做的,就可以把这些动作创建成一个gulp任务然后在指定的条件下自动执行比如在less源文件发生改变后自动编译成css文件

2. gulp特点

易于使用通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
快速构建利用 node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。前一级的输出，直接变成后一级的输入，使得在操作上非常简单
高质量的插件 Gulp 严格的插件指南确保插件如你期望的那样简洁地工作。
易于学习通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握。

3. 流

3.1 流的概念

Stream是nodejs各种对象实现的抽象接口。
所有的stream对象都是EventEmitter的实例,可以发射事件。
流是一种有起点和终点的数据传输手段。
上一个的输出是下一个的输入

3.2 gulp中的流

gulp正是通过代码优于配置的策略来尽量简化任务编写的工作。
类似jquery里的链式操作，把各个方法串连起来构建完整的任务。
用gulp编写任务也可看作是用Node.js代码编写任务。
当使用流时,gulp不需要生成大量的中间文件，只将最后的输出写入磁盘，整个过程因此变得非常快。

4. 安装gulp

在项目里使用gulp需要

安装node
在全局范围内去安装一下gulp的命令行工具
然后在项目里面再去本地安装gulp

4.1 安装node

gulp是基于Nodejs的自动任务运行器安装Gulp和相关行件用的都是node的包管理工具npm 所以你需要先在电脑上安装 node,确定在命令行工具的下面可以使用npm这个命令，这样就能去安装Gulp了

node.js官网

安装好以后，我们可以打开命令行工具，mac 用户可以使用终端工具，windows 用户可以找到cmd命令行工具。

4.2 gulp 命令行工具

使用 npm install 去安装 gulp，注意加上一个 -g 的参数，表示在全局范围内去安装.
一般用 npm 安装的时候用一个 -g 的参数就表示，这个安装的东西会作为命令去执行。
如果你在mac或linux下遇到了权限问题,在下面这个命令的前面加上 sudo npm install gulp -g 并输入mac密码。
```
$ npm install -g gulp
```
安装完成后可以输入 gulp --help 如果输出一些帮助的信息就表示可以gulp命令行成功安装了

如果安装不上可以换一下源试试

淘宝源 npm install -g gulp --registry=http://registry.npm.taobao.org
中国源 npm install -g gulp --registry=http://registry.cnpmjs.org
官方源 npm install -g gulp --registry=http://www.npmjs.org/

4.3 gulp本地安装

先创建一个目录在 mac 和 linux 操作系统下创建一个文件夹
```
$ mkdir learngulp
```
使用 cd 命令进入此目录
```
$ cd learngulp
```
创建项目描述文件package.json 项目需要一个叫package.json的文件来管理项目的配置,可以使用 npm init 这个命令生成

$ npm init
name: (zhufeng_automation) learngulp //项目名称
version: (1.0.0) 1.0.0 //项目版本号
description: learn gulp //项目说明
entry point: (index.js) index.js // 入口文件
test command: test.js //测试脚本执行npm test时会执行此文件
git repository: (https://github.git) //模块的git仓库
keywords: node.js gulp //在npmjs官网搜索时的关键字
author: zhufengpeixun //项目作者名字
license: (ISC) MIT //授权协议
About to write to D:\mygit\zhufeng_automation\package.json:
Is this ok? (yes) yes //直接回车确认

回车后会在当前目录下创建一个 package.json 文件

5. 安装gulp

本地安装gulp到开发依赖中
```
$ npm install gulp --save-dev
```

这样可以把 gulp 作为项目的开发依赖(只在开发时用，不会发布到线上) 第一会在node_modules下安装本地的gulp库第二会把并把添加配置到package.json文件里面

    "devDependencies": {
    +        "gulp": "^3.9.0"
      }

运行gulp

5.1 创建配置文件

gulp的任务要放到一个叫 gulpfile.js 的文件里面先在项目的根目录下面创建一个这样的文件然后在这个文件的顶部添加下面这行代码

+   var gulp = require('gulp');

通过require可以把gulp模块引入当前项目并赋值给gulp变量这样gulp这个变量里面就会拥有gulp的所有的方法了

5.2 创建gulp的任务

可以使用gulp的task方法同样我们去创建一个叫 hello 的任务，它要做的事就是在控制台上输出 "您好" 这两个字

第一个参数是任务的名称

第二个参数是任务的定义,是一个匿名函数

 gulp.task('hello', function () {
    console.log('您好');
 });

5.3 执行gulp任务

打开命令行工具，进入到项目所在的目录，然后输入：

$ gulp hello

会返回：

    [21:36:34] Starting 'hello'...
    您好
    [21:36:34] Finished 'hello' after 959 μs

gulp后面跟着的是任务的名称不输入任务名称的话会默认找default任务，找不到会报错

5.4 执行其它任务

可以使用

$ gulp

6. gulp参数

gulp 只有你需要熟知的参数标记，其他所有的参数标记只在一些任务需要的时候使用。

-v 或 --version 会显示全局和项目本地所安装的 gulp版本号
--gulpfile
手动指定一个 gulpfile 的路径，这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录
--cwd dirpath 手动指定 CWD。定义 gulpfile 查找的位置，此外，所有的相应的依赖（require）会从这里开始计算相对路径
-T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树
--color 强制 gulp 和 gulp 插件显示颜色，即便没有颜色支持
--no-color 强制不显示颜色，即便检测到有颜色支持
--silent 禁止所有的 gulp 日志

7. gulp.js工作方式

gulp的使用流程一般是

首先通过gulp.src()方法获取到想要处理的文件流
然后把文件流通过pipe方法导入到gulp的插件中
最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中
gulp.dest()方法则把流中的内容写入到文件中

    var gulp = require('gulp');
    gulp.src('script/src.js')             // 获取文件的流的api
        .pipe(gulp.dest('dist/dest.js')); // 写文件的api

8. gulp核心API

gulp只有4个核心API

8.1 gulp.src()

在Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream 然后可以通过stream的pipe方法把流导入到你想要的地方比如Gulp的插件中,经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度快的一个原因 gulp.src()方法正是用来获取流的

但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流,这个虚拟文件对象中存储着原始文件的路径、文件名和内容等信息 vinyl

var File = require('vinyl');
var indexFile = new File({
    cwd: "/",
    base: "/test/",
    path: "/test/index.js",
    contents: new Buffer("name=zfpx")
});
console.log(File.isVinyl(indexFile));
console.log(indexFile.isBuffer());
console.log(indexFile.isStream());

其语法为：

    gulp.src(globs[, options])

globs 参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组
options 为可选参数。通常情况下我们不需要用到

8.2 glob语法

gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

8.2.1 glob规则

匹配符	说明
	匹配文件路径中的0个或多个字符，但不会匹配路径分隔符
**	匹配路径中的0个或多个目录及其子目录
?	匹配文件路径中的一个字符(不会匹配路径分隔符)
[...]	匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个
!(pattern\|pattern\|pattern)	匹配任何与括号中给定的任一模式都不匹配的
?(pattern\|pattern\|pattern)	匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern\|pattern\|pattern)?
+(pattern\|pattern\|pattern)	匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern\|pattern\|pattern)+
(pattern\|pattern\|pattern)	匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern\|pattern\|pattern)*
@(pattern\|pattern\|pattern)	匹配括号中给定的任一模式1次，类似于js正则中的(pattern\|pattern\|pattern)

8.2.2 glob示例

glob	匹配
*	能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
.	a.js,style.css,a.b,x.y
//*.js	能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
**	能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
a/**/z	能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z	能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
?.js	能匹配 a.js,b.js,c.js
a??	能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js	只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js	能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

8.3 gulp.dest()

是用来向硬盘写入文件的，其语法为：

     gulp.dest(path[,options])

path 为写入文件的路径
options 为一个可选的参数对象，通常我们不需要用到

要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。

gulp.dest()传入的路径参数只能用来指定要生成的文件的目录,而不能指定生成文件的文件名它生成文件的文件名使用的是导入到它的文件流自身的文件名所以生成的文件名是由导入到它的文件流决定的

     var gulp = require('gulp');
     gulp.src('script/jquery.js')
        .pipe(gulp.dest('dist/jquery.js')); 
     //最终生成的文件路径为 dist/jquery.js/jquery.js,而不是dist/jquery.js

gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径
通过指定gulp.src()方法配置参数中的base属性，我们可以更灵活的来改变gulp.dest()生成的文件路径
 //配置了base参数，此时base路径为scriptgulp.src(script/lib/*.js, {base:'script'})
    //假设匹配到的文件为script/lib/jquery.js
    //此时生成的文件路径为 build/lib/jquery.js
    .pipe(gulp.dest('build'))

8.4 gulp.task()

gulp.task方法用来定义任务，其语法为：

    gulp.task(name[, deps], fn)

name 为任务名称
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数

fn 为任务定义函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

  gulp.task('mytask', ['array', 'of', 'task', 'names'],   function() { //定义一个有依赖的任务
      // Do something
  });

如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务

//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行gulp.task('one',function(){      //one是一个异步执行的任务
      setTimeout(function(){
         console.log('one is done')
      },5000);
    });
 gulp.task('two',['one'],function(){  
     console.log('two is done');
    });

在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数

 gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成
      //one是一个异步执行的任务
      setTimeout(function(){  
        console.log('one is done');
        cb();  //执行回调，表示这个异步任务已经完成
      },5000);
    });

8.5 gulp.watch()

用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件拷贝等。其语法为

    gulp.watch(glob[, opts], tasks)

glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的 glob 相同。
opts 为一个可选的配置对象，通常不需要用到

tasks 为文件变化后要执行的任务，为一个数组

  gulp.task('uglify',function(){  
    //do something
  });
  gulp.task('reload',function(){   
   //do something
  });
  gulp.watch('js/**/*.js', ['uglify','reload']);

另外一种使用方式：

    gulp.watch(glob[, opts, cb])

glob和 opts 参数与第一种用法相同
cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息 type属性为变化的类型，可以是 added、changed、deleted和path属性为发生变化的文件的路径
```
   gulp.watch('js/**/*.js', function(event){    //变化类型 added为新增,deleted为删除，changed为改变
    console.log(event.type);    //变化的文件的路径
    console.log(event.path);
  });
```

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » Gulp入门教程之一 Gulp的安装与配置