gulp快速上手（不想看官方文档的同学朝这边看）

前言

这几天和一个团队做项目用到gulp,这里写点自己的看法。
首先，来看这篇教程的肯定是听过gulp的，那么一定也了解过nodejs，知道前端自动化工具，可是平时用sublime写代码用的好好的，没觉得需要什么工具来加快开发流程。那么第一个问题一定是“我们为什么用gulp？”

我们为什么用gulp？

首先先问自己一个问题：平时用

sass/less写css

，用

jade写/html

代码，那么这些文件的的

测试

、

检查

、

合并

、

压缩

、格式化、部署，

监听

。应该怎么完成呢？就来压缩合并来讲，可以减少多个css，js文件请求，优化网页性能，这样的工作是否应该有一个很好的解决方案呢？---答案就是

gulp

gulp与grunt谁好谁坏的争论一直存在，大家可以自行搜索，这里我想说，适合自己的就是最好的，我是前端菜鸟，所以一上手接触的就是gulp。

安装gulp

学习一门技术，最好的途径就是看官方文档。这里我贴出地址
gulp官方网址 gulp插件地址 gulp 官方API gulp中文API
1.通过npm包安装（前提是已经安装了nodejs环境 和 npm）

npm install gulp -g

这里稍微介绍一下命令的含义：因为npm安装插件的命令行格式为

npm install <name> [-g] [--save-dev]

其中 ：node插件名称

-g

：全局安装。将会安装在全局路径下，并且写入系统环境变量，最直观的感觉就是可以可以通过命令行在任何地方调用它；全局路径 输入

npm config get prefix

可以看到路径，我的ubuntu系统显示

/usr/local/lib/node_modules/

非全局安装：将会安装在当前定位目录； 本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

--save

：将保存配置信息至package.json（package.json是nodejs项目配置文件）；因为node插件太多，不用一个package文件保存插件信息，之后维护和升级会比较麻烦

-dev

：保存至

package.json

的devDependencies节点，不指定-dev将保存至dependencies节点；

在全局安装完gulp后，运行

gulp -v

可以查看gulp版本号

第一个gulp项目

1.先新建一个项目目录：

mkdir gulp-file

2.进入这个目录：

cd gulp-file

3.再次在本地安装gulp：

npm install gulp --save

这样做的目的是为了让gulp开发升级更加灵活，具体的我也不太懂，

stackoverflow

上面有人问过这个问题“为什么我要在全局和本地安装两次我的gulp”
4.新建package.json配置文件：

npm init

5.会出来一个命令行对话输入


依次填写即可得到你的

package.json

文件，ls一下可以查看。
6.接下来假设

gulp-flie 项目

开发中还有css，js等文件，我们可以通过配置gulpfile.js文件来进行管理

gulpfile.js配置

7.在根目录下创建配置文件：

touch gulpfile.js

8.打开编辑:

gedit gulpfile.js

9. gulpfile.js文件内容如下：

var gulp =require("gulp");//创建 gulp模块
var uglify=require("gulp-uglify");//创建js混淆压缩 模块
var minify_css =require("gulp-minify-css");　//创建 css混淆压缩模块
var gulp_concat = require('gulp-concat');  //创建 文件合并模块

以上这5个都是node_modules/里的插件模块。‘
因为之前没有安装过这些插件，所以得用npm安装

10.安装相应的模块：

npm install gulp-uglify gulp-minify-css gulp-concat gulp-rename --save

11.安装完成之后，可以打开

package.json

文件，看到相关插件的一些版本信息
12.插件的作用是为了让我们前端开发更加流畅和规范化。
13.这个时候，打开官方文档，发现官网说gulp有4个属性，即

src，dest，watch，dask。

**官方API**

gulp.task(name[, deps], fn)
gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.watch(glob [, opts], tagulpsks)

看不懂没关系，我们先快速上手着几个api再一个个分析接着在gulpfile.js中写入下列几行代码

gulp.task('min-css',function(){  //1
gulp.src('./src/css/*.css')  //2
.pipe(gulp_concat("index.min.css"))//3
.pipe(minify_css())//4.混淆即压缩
.pipe(gulp.dest('./dist/css'));//5.输出路径
});

//1. gulp.task('min-css',function(){ }

这个API用来创建任务，在命令行下可以输入$ gulp min-css来执行上面的任务。gulp.task(name[, deps], fn)，

第一个参数name

是自定义你的任务名称，

第二个参数[deps]是一个数组

，里面是你定义的其他任务的名称，

这些任务会在本次定义的任务之前执行并完成

。

第三个参数fn

是本次任务的回调函数。
举个栗子：

gulp.task('task1',function(){
console.log("task1 done");
});
gulp.task('task2',function(){
console.log("task2 done");
});
gulp.task('task3',function(){
console.log("task3 done");
});
gulp.task('build',['task1','task2','task3'],function(){
console.log("build done");
});

下图是执行build任务的结果，用

gulp build

现在应该很清除这3个参数的作用了吧

//pipe（），管道函数，及

//2.gulp.src('./src/css/*.css')

globs

是一个匹配模式，如gulpfile.js中写的

gulp.src('./src/css/*.css')

'./src/css/*.css'

匹配同层路径下src目录下的css目录下的所有以.css结尾的文件
更多的匹配模式可以参考官方文档。

globs类型

：String 或者 Array。string则说明它匹配单一模式。array表示它可以传入数组多个匹配字段，如['./src/css/index.css','./src/css/pomelo.css']

[options]

是可选的。主要是两个，options.base----匹配的根目录，options-read
举个栗子：哈哈，这个

得等学会gulp.dest()

这个API后才能具体说明。

//3 .pipe(gulp_concat("index.min.css"))

pipe（）

方法是正如字面意思理解的那样，把一个文件流输入，通过pipe管道输出，


这样可以实现文件流的高效处理,我认为这种方法很像jquery的写法。能够进行链式调用处理。
那么毫无疑问，第三段的代码.

pipe(gulp_concat("index.min.css"))//3

的意思就是把获取到匹配

gulp.src()

字段的文件通过

pipe

管道进入插件

gulp_concat()

的处理程序，并且合并后的文件名为

index.min.css

这里插件

gulp_concat

是文件合并的插件，详细的使用方法请在gitbub或者npm网站中找到相关的api文档。

//4 .pipe(minify_css())//混淆压缩js插件

方法和第三步是一样的

//5 .pipe(gulp.dest('./dist/css'));

第一个参数 path：String 或者 Function

string类型

--------输出文件的目标路径（或目录）

'./dist/css'

function

--------将接收一个 vinyl 文件实例 作为参数（具体请看分析“Gulp思维——Gulp高级技巧”）
第二个参数options有两个属性

options.cwd

和

options.mode

options.cwd

用于计算输出目录的，只有提供的输出目录是相对路径时此参数才有用。

options.mode

用于创建的输出目录指定权限。默认值为077

前面提到过。想使用gulp.src的一些属性参数得先学会gulp.dest().这是因为源的参数设定（即输入端）会影响输出端的。


那么什么是

基础路径base

呢？

gulp.src('./src/css/*.css')

中有第二个参数base，可以指定基础路径，如果不设置，则

默认基础路径为 * 之前的路径

。


如果设置了 gulp.src('./src/css/*.css',{base：'./'})
则base------'./'

gulp.dest('./dist/css')

传入的参数就是base路径


举个栗子来解释什么是

替换

gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'))；

那么最后文件处理完成的最终路径是

./dist/css/*.css

如果是

gulp.src('./src/css/*.css',{base：'./'}).pipe().pipe(gulp.dest('./dist/css'))；

那么最后文件处理完成的最终路径是

./dist/css/src/css/*.css

综上所述：

快速入门gulp就算结束了。我们已经学会如何装gulp，如何

安装gulp插件

，如何写

package.json

文件。如何写

gulpfile.js

配置文件
了解了gulp的3大API

gulp.src()

;

gulp.task()

;

gulp.dest()

实现的功能

：完成了对多个css文件的合并与压缩并且输入到目标文件夹下

最后再次献上gulp官方网站，想学习更多就得自己修炼了。 ^0^

关于流的介绍请看https://www.h5jun.com/post/gulp-build