使用return来解决,是最好的方式。
return有很多种实现方式。
from:http://www.tuicool.com/articles/ea6FVf
gulp 是前端开发过程中对代码进行构建(Build)的工具,类似于Java世界中的Ant或者Maven。与Ant或Maven类似,在用gulp进行build时,经常需要顺序执行任务:在前一个任务彻底结束后才开始下一个任务。比如,在进行新的一次LESS编译前,首先需要保证删除上一次编译的结果。也即,对于以下两个gulp任务:
var gulp = require('gulp'), less = require('gulp-less'), clean = require('gulp-clean'); gulp.task('compileLESS', function(){ gulp.src('sample.less') .pipe(less()) .pipe(gulp.dest('sample.css')); }); gulp.task('clean', function(){ gulp.src('sample.css', { read:false }) .pipe(clean()); });
必须保证’clean’任务执行完毕后才开始进行’compileLESS’任务。
gulp中的顺序执行方案
在gulp对任务的定义中(gulp.task),可以声明任务之间的依赖。比如,可以声明任务’compileLESS’依赖于’clean’:
gulp.task('compileLESS', ['clean'], function(){ //compile LESS file... }); gulp.task('clean', function(){ gulp.src('sample.css', { read:false }) .pipe(clean()); });
在声明任务依赖后,可以保证’clean’定义的function执行完毕后,’compileLESS’定义的function才开始执行。
不过,即使定义了任务依赖,对于上述例子我们依然会发现:有时,需要清理的文件尚未删除干净,用于编译的任务就已经开始生成文件了;这在文件较多的项目环境下尤为常见。原因在于,对’clean’定义的function而言,虽然函数本身已经执行完毕了,但是文件删除操作可能仍在进行 — gulp任务中的操作大多数都是数据流(Stream)的操作,其操作进度与函数执行无关。
如果需要在文件彻底清理后才开始执行’compileLESS’任务,则需要在’clean’任务中进行特殊编码:令其返回最终的数据流(Stream)对象:
gulp.task('compileLESS', ['clean'], function(){ //compile LESS file... }); gulp.task('clean', function(){ return gulp.src('sample.css', { read:false }) .pipe(clean()); });
问题根源
应该承认,这样的一种依赖定义方式是不直观的、令人困惑的。然而思考之后会发现,对于这个问题,不能简单的用”bug”来进行总结。
问题的难点在于:如何在一个任务运行系统中监听数据流的结束?对于数据流而言,代码语句的执行结束仅仅意味着数据操作的开始,唯一能确定数据操作结束的是最后一个数据流所触发的end事件;因此,只有想办法监听到这个end事件,才有可能实现真正意义上的任务依赖。而在任务定义的函数中返回最后一个数据流,是一个相对来说使用起来最方便的方案。
事实上,gulp中的任务运行系统并不是自己实现的,而是直接使用了 orchestrator。在gulp的源代码中可以发现,gulp继承了orchestrator,而gulp.task仅仅只是orchestrator.add的别名而已:
//gulp source code var util = require('util'); var Orchestrator = require('orchestrator'); function Gulp() { Orchestrator.call(this); } util.inherits(Gulp, Orchestrator); Gulp.prototype.task = Gulp.prototype.add;
在orchestrator中,解决上述任务依赖的方式有三种:
- 在任务定义的function中返回一个数据流,当该数据流的end事件触发时,任务结束。
- 在任务定义的function中返回一个promise对象,当该promise对象resolve时,任务结束。
- 在任务定义的function中传入callback变量,当callback()执行时,任务结束。
gulp脚本中可以使用这三种方法来实现任务依赖,不过由于gulp中的任务大多是数据流操作,因此以第一种方法为主。
+
+
+
=
+
+
=
相关推荐
gulpfile.js是Gulp任务的配置文件,所有的Gulp任务都是在该文件中定义的。 Gulp的默认任务是指在没有指定任务时会自动执行的任务,通常通过`default`关键字来定义。它是非常有用的,尤其是在需要简化构建过程的情况...
3. **控制流变换**:通过改变代码结构,如将顺序执行的语句变为条件分支或循环,增加逆向分析的复杂性。 4. **字符串加密**:对常量字符串进行编码或加密,防止直接查找和使用。 在压缩包内的教程中,我们可能学习...
【标题】"前端开源库-gulp-wrap-amd"是一个针对前端开发的开源工具,它主要用于帮助...在完成配置后,运行Gulp任务,即可自动完成代码的AMD包装工作。这对于大型前端项目来说,能够极大地提升开发效率和代码质量。
**Gulp** 是一款流行的自动化构建工具,用于简化前端开发流程,包括编译预处理器语言(如 SCSS 或 LESS),合并文件,压缩资源,以及执行其他任务。通过安装和使用 gulp-cssorder,开发者可以自动化 CSS 代码的排序...
以下是一个简单的`Gulpfile.js`示例,展示了如何创建一个基础的Gulp任务: ```javascript const gulp = require('gulp'); // 默认任务 gulp.task('default', function() { console.log('Hello, Gulp!'); }); ``` ...
用户通过编写Gulp任务来定义一系列操作,这些任务会按顺序执行,对项目中的文件进行处理。 `gulp-order`是Gulp的一个插件,它的主要功能是为了解决JavaScript文件的加载顺序问题。在某些情况下,比如模块化开发或者...
3. **依赖管理**: 使用 `gulp.series()` 和 `gulp.parallel()` 可以定义任务的执行顺序和并行执行,确保任务按正确的顺序完成。 4. **实时刷新**: `gulp-watch` 插件可监控文件变化,一旦文件更新,它会自动触发...
5. **依赖管理**:`gulp.series()` 和 `gulp.parallel()` 方法用来管理任务的执行顺序和并行性。前者按顺序运行任务,后者则同时运行所有任务。 6. **文件系统操作**:`gulp.src()` 用于指定需要处理的源文件,`...
然后,根据项目文档配置任务,这可能包括指定源文件和目标文件,定义任务的执行顺序等。最后,运行任务处理程序,它会按照预设的规则自动执行相关任务。 总结来说,任务处理程序是提升开发效率的关键,尤其在HTML...
Gulp的工作方式是通过定义一系列的任务,这些任务可以按特定顺序执行,也可以并行运行。开发者可以使用Gulp插件来处理各种任务,如Sass编译、ES6转译、图像优化等。Gulpfile.js是配置Gulp任务的文件,其中包含了项目...
2. **运行 Gulp**:安装完成后,执行 `gulp` 命令启动 Gulp。Gulp 会监听源代码的变化,当源代码有更新时自动重新构建并刷新浏览器,实现热加载。 3. **查看应用**:打开 `index.html` 文件,即可在浏览器中看到你...
在`gulpfile.js`中,你会看到各种任务定义,每个任务都由一组Gulp插件组成,这些插件执行特定的构建步骤。 对于Angular项目来说,`gulp-angular-skeleton` 提供了以下关键功能: 1. **自动化模块加载**:Gulp可以...
Babel插件的执行顺序是从左到右,从上到下,用于控制插件的执行顺序和转译规则。 预设 什么是预设?预设是指Babel的预设配置,用于简化配置和提升转译速度。 @babel/polyfill 什么是@babel/polyfill?@babel/...
4. **测试自动化**:在测试框架如Jest或Mocha中,"executive"可以帮助编写和执行测试用例,特别是对于需要顺序执行或有依赖关系的测试。 5. **模块化开发**:通过模块化组织代码,"executive"可以协助开发者构建可...
Gulp任务将自动运行,但要手动运行它们: 构建Javascript:这将按名称顺序将js文件连接在一起: gulp build-js 建筑SASS gulp build-sass 压缩影像 gulp build-images 在客户端上使用JS节点模块 gulp build-...
命令order.autoprefixer 默认值:100类型:整数css 处理序列中自动前缀任务的顺序。应用程序接口二手挂钩 管道.devProcessCss* 为开发环境注册 css autoprefixer 处理。 管道.processCss* 为 dist 环境注册 css ...
1. **Gulp任务定义**:使用`gulp.task()`函数定义任务,如`gulp.task('default', function() {...})`,其中'default'是任务名,可以作为默认任务运行。 2. **流处理**:Gulp使用Node.js的Stream概念,允许数据在...
5. **任务依赖与链式调用**: 你可以定义任务间的依赖,确保任务按特定顺序执行: ```javascript task('build', function() { // Build tasks here }); task('deploy', ['build'], function() { // Deploy ...
在调试 Grunt 任务时,开发者通常会遇到的问题包括任务执行顺序错误、插件配置不当、语法错误等,通过 Node Inspector,这些问题可以得到直观且详尽的调试。 在压缩包 "grunt-debug-task-master" 中,通常会包含...
- **性能优化**:如果gulp任务运行缓慢,可能需要优化文件读写操作,或者调整任务执行顺序,避免不必要的文件重读和重写。 - **插件版本管理**:保持npm包更新至最新版本可以获取最新的特性和性能提升,但同时要...