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')

这个API得到要处理的文件源路径并返回Vinyl files类型的输入流 官方API gulp.src(globs[, options])

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'));

官方API gulp.dest(path[, options])

第一个参数 path：String 或者 Function
string类型--------输出文件的目标路径（或目录）'./dist/css'
function--------将接收一个 vinyl 文件实例 做为参数（具体请看分析“Gulp思惟——Gulp高级技巧”）
第二个参数options有两个属性options.cwd 和 options.mode
options.cwd 用于计算输出目录的，只有提供的输出目录是相对路径时此参数才有用。
options.mode 用于建立的输出目录指定权限。默认值为077

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

gulp.dest()的做用是将 目的地址（gulp.dest()）的基础路径（base）替换成 源地址(gulp.src())的基础路径（base）输出

那么什么是基础路径base呢？
gulp.src('./src/css/*.css')中有第二个参数base，能够指定基础路径，若是不设置，则默认基础路径为 * 以前的路径。

base：'./src/css'

若是设置了 gulp.src('./src/css/*.css',{base：'./'})
则base------'./'
gulp.dest('./dist/css')传入的参数就是base路径

base:'./dist/css'

举个栗子来解释什么是替换

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大APIgulp.src();gulp.task();gulp.dest()
实现的功能：完成了对多个css文件的合并与压缩而且输入到目标文件夹下

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

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