gulpfile实例

gulpfile是什么呢?简单的说,它是gulp命令的入口文件,当你在命令行里面执行glup my_task的时候,实际上可以理解为执行node gulpfile.js my_task,当然,这只是有利于你理解,实际上比这复杂一些。

我们把这个gulpfile.js创建在项目的根目录下,这样就可以在项目中规定一些我们自己的gulp任务,这些任务在gulpfile.js里面进行注册,即gulp.task,这会在下一章API里面讲到。

使用ES6

我们可以用gulpfile.babel.js代替gulpfile.js(直接重命名即可),这样可以借助babel使用ES6新特性,不过我们也需要在项目中安装babel:

$ npm install --save-dev babel-core
$ npm install --save-dev babel-register
$ npm install --save-dev babel-preset-latest

在项目根目录下创建.babelrc文件,内容如下:

{
  "presets": ["latest"]
}

这样,就可以在gulpfile中使用ES6代码。

部署项目任务

有的时候,我们的项目任务比较复杂,不可能通过一个gulpfile.js实现全部我们想要的任务功能,否则会让这个文件超级大。

这个时候,我们可能需要将不同的任务分到不同的文件模块中去。我的做法是创建一个gulp目录,把所有的任务分割成一个一个的,每一个文件一个任务:

$ mkdir gulp/task
$ vi gulp/task/add.js

在add.js中撰写任务流程。

var args = require('../../tools/process.args'); // 引入我们上一章中介绍的process.args

module.exports = function() {
    if(!args.name) {}
    ...
};

然后再把add.js require到gulpfile中进行任务注册:

var gulp = require('gulp');

gulp.task('add',require('./gulp/task/add'));

这样就可以将gulp任务进行分解,当你的gulp任务特别多的时候,可以有效的进行管理。

是不是已经有点感觉了,赶紧手动尝试一下吧。

下一章,就将进入正式的gulp编程,你会了解怎么样创建自己的gulp任务,以及怎样部署代码。

results matching ""

    No results matching ""