gulp基本语法

最新推荐文章于 2020-04-12 10:37:00 发布

转载最新推荐文章于 2020-04-12 10:37:00 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/iloveyou-sky/p/6409681.html

本文介绍Gulp的基本用法，包括使用gulp.src加载文件、使用gulp.dest写入文件、定义任务gulp.task及监视文件变化gulp.watch。通过实例展示了如何利用这些功能进行前端资源的构建与压缩。

pipe:用管道输送

1.gulp.src(glops[, options])

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

1 gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
2   .pipe(minify())
3   .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'
4 
5 gulp.src('client/js/**/*.js', { base: 'client' })
6   .pipe(minify())
7   .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

2.gulp.dest(path[, options])

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

1 gulp.src('./client/templates/*.jade')
2   .pipe(jade())
3   .pipe(gulp.dest('./build/templates'))
4   .pipe(minify())
5   .pipe(gulp.dest('./build/minified_templates'));

3.gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务（task）。

 1 var gulp = require('gulp');
 2 
 3 // 返回一个 callback，因此系统可以知道它什么时候完成
 4 gulp.task('one', function(cb) {
 5     // 做一些事 -- 异步的或者其他的
 6     cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
 7 });
 8 
 9 // 定义一个所依赖的 task 必须在这个 task 执行之前完成
10 gulp.task('two', ['one'], function() {
11     // 'one' 完成后
12 });
13 
14 gulp.task('default', ['one', 'two']);

gulp.watch(glob[, opts, cb])

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

1 //每次变动需要执行的 callback
2 gulp.watch('js/**/*.js', function(event) {
3   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
4 });

转载于:https://www.cnblogs.com/iloveyou-sky/p/6409681.html