1.gulp是啥?
gulp的官方定义灰常简洁: 基于文件流的构建系统 。(那么看到这句话你懂了么?反正.....我好像是没懂-)
个人见解:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器,是方便我们进行项目开发的工具。
2.gulp能做什么?
她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
举个栗子:项目结构如下:
这样一个项目结构,运行index.html
时,需要引入4个js文件
大家都知道,前端浏览器的加载信道非常有限,我们需要尽可能的少占用信道,加快浏览器的加载速度,我们通常的做法时将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官网,点击下载安装即可
打开系统命令行工具,查看node是否安装成功node -v
,我安装的是6.2.0版本
*2)安装 gulp (打开命令行,进入指定目录)
cd gulpDay1
npm install gulp
然后坐等安装成功,安装成功之后,目录中会出现一个node_modules
目录,接下来我们查看是否安装成功(gulp -v
)
OK ! 大功告成!
安装完了,我们是不是搞点事情啊 ? 给 gulp
新建一个任务,让他去搬砖怎么样?
- 1)在
gulpDay1
目录下新建一个gulpfile.js
文件(Ps:这是gulp运行必须的)
- 2)
gulpfile.js
文件写入代码如下
//调用gulp模块
var gulp = require('gulp')
//用gulp建立一个搬砖任务
gulp.task('banzhuan', function() {
console.log("你去搬砖吧");
});
- 3)运行这个任务 在
gulpDay1
目录下打开命令行,运行gulp banzhuan
;运行结果如下
说明
- 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
注:本系列文章只做简单入门,深入了解请自行修行。