几个月前三木君向我推荐过gulp,到现在因为工作需要才接触到它,真的很惭愧,在此记录下对gulp的初印象。
全局安装:
$ npm install –global gulp
一个gulpfile.js文件:
这个文件需要在项目的根目录下创建。默认任务(什么也不做):
- var gulp = require(‘gulp‘);
- gulp.task(‘default‘, function() {
- // place code for your default task here
- });
下面的命令将执行这个任务:
$gulp
来看看gulp的API!
分为四个大的部分:
- gulp.src:定义被操作的源文件(可用*来指定目录、文件类型)
- gulp.task:定义任务,例如压缩、优化、编译等等
- gulp.dest:在指定目录写入(执行任务后)生成的文件
- gulp.watch:当一个文件被修改时,执行某个任务
*简单来说就是:哪些文件(src)?进行怎样的操作(task)?结果写到哪儿、怎么写入(dest)?然后,为了方便我们专心编码,让watch来自动监测一切变化吧。
举个例子:
创建一个监听所有类型为less的文件的任务,当任何一个less文件被修改时,执行less-pro这个任务。*
- gulp.task(‘watch-less‘, function () {
- gulp.watch(‘less/*.less‘, [‘less-pro‘]);
- });
less-pro任务片段如下:
- gulp.task(‘watch-less‘, function () {
- gulp.watch(‘less/*.less‘, [‘less-pro‘]);
- });
如上watch less的例子中,执行:
$ gulp watch-less
就可以自动监控所有less文件的改变并进行编译。
全文链接:http://www.gbtags.com/gb/share/5697.htm
时间: 2024-10-05 05:21:46