【一】gulp入门

1.gulp是啥？

gulp的官方定义灰常简洁： 基于文件流的构建系统 。（那么看到这句话你懂了么？反正.....我好像是没懂^-）

个人见解：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，是方便我们进行项目开发的工具。

2.gulp能做什么？

她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

举个栗子：项目结构如下：

项目结构

这样一个项目结构，运行index.html时，需要引入4个js文件

Paste_Image.png

大家都知道，前端浏览器的加载信道非常有限，我们需要尽可能的少占用信道，加快浏览器的加载速度，我们通常的做法时将lib目录中的文件合并为一个名为 vendor.js的文件，并将js目录中的文件合并为一个名为 index.js的文件，最终的引用链接为：

当然项目中文件少时，我们确实可以手动，那么当需要合并的js很多时，当项目中的各个js文件是由不同的人开发时，难道我们要一次有一次的手动去合并？每改动一个文件我们都去手动合并一次？好麻烦有木有？！

这个时候 gulp出场了，它可以让合并js这个操作自动化，你只需要给它编写一个任务，然后运行这个任务即可。

那么，现在你明白它是做什么的了？

3.gulp怎么安装？

• 1）安装nodejs
  gulp是一个node 模块，第一步自然是安装node
  打开nodejs官网，点击下载安装即可

Paste_Image.png

打开系统命令行工具，查看node是否安装成功node -v，我安装的是6.2.0版本

Paste_Image.png

*2）安装 gulp （打开命令行，进入指定目录）

cd gulpDay1
npm install  gulp

然后坐等安装成功，安装成功之后，目录中会出现一个node_modules目录，接下来我们查看是否安装成功（gulp -v）

Paste_Image.png

OK ! 大功告成！

安装完了，我们是不是搞点事情啊 ? 给 gulp新建一个任务，让他去搬砖怎么样？

• 1）在 gulpDay1目录下新建一个gulpfile.js文件（Ps：这是gulp运行必须的）

Paste_Image.png

• 2）gulpfile.js文件写入代码如下

//调用gulp模块
var gulp = require('gulp')
//用gulp建立一个搬砖任务
gulp.task('banzhuan', function() {
  console.log("你去搬砖吧");
});

• 3）运行这个任务 在gulpDay1目录下打开命令行，运行gulp banzhuan；运行结果如下

Paste_Image.png

说明

• a 新建任务的格式

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

name 任务名字，类型：字符串；
deps 当前任务依赖的任务，这些任务会在你当前任务运行之前完成，类型：Array；例如

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

fn 任务所要执行的一些操作，类型：js代码；

• b 运行任务的格式 gulp

gulp banzhuan huo_ni qi_qiang

gulp常用地址：

gulp官方网址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424

注：本系列文章只做简单入门，深入了解请自行修行。