gulp初印象

 

几个月前三木君向我推荐过gulp，到现在因为工作需要才接触到它，真的很惭愧，在此记录下对gulp的初印象。

全局安装：

$ npm install –global gulp

一个gulpfile.js文件：

这个文件需要在项目的根目录下创建。默认任务（什么也不做）：

1. var gulp = require('gulp');
2. gulp.task('default', function() {
3. // place code for your default task here
4. });

下面的命令将执行这个任务：

$gulp

来看看gulp的API！

分为四个大的部分：

• gulp.src：定义被操作的源文件（可用*来指定目录、文件类型）

• gulp.task：定义任务，例如压缩、优化、编译等等

• gulp.dest：在指定目录写入（执行任务后）生成的文件

• gulp.watch：当一个文件被修改时，执行某个任务

*简单来说就是：哪些文件（src）？进行怎样的操作（task）？结果写到哪儿、怎么写入（dest）？然后，为了方便我们专心编码，让watch来自动监测一切变化吧。

举个例子：

创建一个监听所有类型为less的文件的任务，当任何一个less文件被修改时，执行less-pro这个任务。*

1. gulp.task('watch-less', function () {
2. gulp.watch('less/*.less', ['less-pro']);
3. });

 

less-pro任务片段如下：

1. gulp.task('watch-less', function () {
2. gulp.watch('less/*.less', ['less-pro']);
3. });

 

如上watch less的例子中，执行：

$ gulp watch-less

就可以自动监控所有less文件的改变并进行编译。

全文链接：http://www.gbtags.com/gb/share/5697.htm