Gulp基本用法

2022-06-06 15:32:51 浏览数 (2)

Gulp是一个模块化打包工具。 Gulp本身只有几个入口,支持他拥有强大功能的是各种各样的插件。 Gulp的使用看起来非常简单,只需要一个一个任务链式执行就可以了,它还可以与Webpack结合起来使用 比如将Webpack作为一个插件来处理ES6转换为ES5的操作。 下面记录一下Gulp的API以及一些用到的插件。

代码语言:javascript复制
gulp.src(globs[, options])

输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

globs:一种匹配文件的规则。


代码语言:javascript复制
gulp.dest(path[, options])

能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。

文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的,相对路径也可以根据所给的 base 来计算。 请查看上述的 gulp.src 来了解更多信息。


代码语言:javascript复制
gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务(task)

Orchestrator: 一个执行并发任务的库。


代码语言:javascript复制
gulp.watch(glob[, opts], tasks)

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。

glob:

类型: String or Array

一个 glob 字符串,或者一个包含多个 glob 字符串的数组,用来指定具体监控哪些文件的变动。

eg:

代码语言:javascript复制
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File '   event.path   ' was '   event.type   ', running tasks...');
});

gulp.watch('js/**/*.js', function(event) {
  console.log('File '   event.path   ' was '   event.type   ', running tasks...');
});

相关链接:

gulpjs中文官网

0 人点赞