认识脚手架之一 - gulp
什么是gulp
gulp是基于node.js的一款开源脚手架工具,其依靠于流式操作(stream)和简单的API,迅速的在开发者心目中占据了一定的地位,本文将简单介绍gulp的简单使用及其重要的几个api。
如果想更加深入的了解gulp,请参考官方网站:gulp官网。
流式操作
什么是流式操作,简单讲,就是读取文件 → 修改文件 → 输出文件,示例图:
安装gulp
首先应该确保电脑上已经安装了node和npm,新建一个gulp的文件夹用来测试学习。
1.全局安装gulp
$ npm install -g gulp
2.作为项目的开发依赖安装
$ npm install –save-dev gulp
3.在项目文件夹下新建一个gulpfile.js的文件
安装完gulp之后需要初始化出来一个package.json的文件,后面迁移项目时可以很方便的根据这个json文件安装会所有的依赖包。
如何初始化?
$ npm init
初始化ok,接着就要新建gulpfile.js了:
|
|
4.运行gulp
$ gulp
执行这步操作后,上面定义的default任务将会被执行,如果想要单独执行特定的任务,只需要:
$ gulp (taskName) (otherTaskName)
常用api
1. gulp.src
|
|
示例代码表示要读取client/templates文件夹下面的所有jade文件并进行相关的操作。
2. gulp.dest
|
|
示例代码表示读取相关文件并进行操作之后,将会写入指定的目录中,也即是build/minified_templates文件夹中。
3. gulp.task
|
|
需要注意的是,如果在定义的mytask
任务后面有数组参数,那就是一个阻塞的过程,必须先执行数组中的任务完后才会执行当前定义的任务。
4. gulp.watch
|
|
上述代码表示监听在**文件夹下面的任意js文件,当发生改变时,立即执行uglify和reload任务。
gulp插件
gulp还提供了丰富的插件来完成日常的工作内容,按需查询gulp插件集。