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的文件，最终的引用链接为：
<script src="js/vendor.js"></script>
<script src="js/index.js"></script>
当然项目中文件少时，我们确实可以手动，那么当需要合并的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 <task> <othertask>
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
注：本系列文章只做简单入门，深入了解请自行修行。
网友评论