`
fantaxy025025
  • 浏览: 1308464 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

gulp_如何保证任务和程序顺序执行?

 
阅读更多

使用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中,解决上述任务依赖的方式有三种:

  1. 在任务定义的function中返回一个数据流,当该数据流的end事件触发时,任务结束。
  2. 在任务定义的function中返回一个promise对象,当该promise对象resolve时,任务结束。
  3. 在任务定义的function中传入callback变量,当callback()执行时,任务结束。

gulp脚本中可以使用这三种方法来实现任务依赖,不过由于gulp中的任务大多是数据流操作,因此以第一种方法为主。

 

 

+

+

+

=

+

+

=

 

分享到:
评论

相关推荐

    Gulp Succinctly

    gulpfile.js是Gulp任务的配置文件,所有的Gulp任务都是在该文件中定义的。 Gulp的默认任务是指在没有指定任务时会自动执行的任务,通常通过`default`关键字来定义。它是非常有用的,尤其是在需要简化构建过程的情况...

    混淆工具以及说明.rar

    3. **控制流变换**:通过改变代码结构,如将顺序执行的语句变为条件分支或循环,增加逆向分析的复杂性。 4. **字符串加密**:对常量字符串进行编码或加密,防止直接查找和使用。 在压缩包内的教程中,我们可能学习...

    前端开源库-gulp-wrap-amd

    【标题】"前端开源库-gulp-wrap-amd"是一个针对前端开发的开源工具,它主要用于帮助...在完成配置后,运行Gulp任务,即可自动完成代码的AMD包装工作。这对于大型前端项目来说,能够极大地提升开发效率和代码质量。

    gulp-cssorder:一个 css 编码风格自动格式化程序 - Alloyteam css 编码风格的 gulp 插件

    **Gulp** 是一款流行的自动化构建工具,用于简化前端开发流程,包括编译预处理器语言(如 SCSS 或 LESS),合并文件,压缩资源,以及执行其他任务。通过安装和使用 gulp-cssorder,开发者可以自动化 CSS 代码的排序...

    gulp-project:Gulp 入门

    以下是一个简单的`Gulpfile.js`示例,展示了如何创建一个基础的Gulp任务: ```javascript const gulp = require('gulp'); // 默认任务 gulp.task('default', function() { console.log('Hello, Gulp!'); }); ``` ...

    gulp-order-example

    用户通过编写Gulp任务来定义一系列操作,这些任务会按顺序执行,对项目中的文件进行处理。 `gulp-order`是Gulp的一个插件,它的主要功能是为了解决JavaScript文件的加载顺序问题。在某些情况下,比如模块化开发或者...

    Gulp-Boilerplate:使用 AngularJS 的 Gulp 样板

    3. **依赖管理**: 使用 `gulp.series()` 和 `gulp.parallel()` 可以定义任务的执行顺序和并行执行,确保任务按正确的顺序完成。 4. **实时刷新**: `gulp-watch` 插件可监控文件变化,一旦文件更新,它会自动触发...

    gulp-examples:吞咽实际例子

    5. **依赖管理**:`gulp.series()` 和 `gulp.parallel()` 方法用来管理任务的执行顺序和并行性。前者按顺序运行任务,后者则同时运行所有任务。 6. **文件系统操作**:`gulp.src()` 用于指定需要处理的源文件,`...

    任务处理程序:管理日常任务的简便方法

    然后,根据项目文档配置任务,这可能包括指定源文件和目标文件,定义任务的执行顺序等。最后,运行任务处理程序,它会按照预设的规则自动执行相关任务。 总结来说,任务处理程序是提升开发效率的关键,尤其在HTML...

    angular-demo:由Angular和Gulp开发的演示项目

    Gulp的工作方式是通过定义一系列的任务,这些任务可以按特定顺序执行,也可以并行运行。开发者可以使用Gulp插件来处理各种任务,如Sass编译、ES6转译、图像优化等。Gulpfile.js是配置Gulp任务的文件,其中包含了项目...

    react-gulp-boilerplate:使用 Browserify 和 Gulp 的 React.js 样板

    2. **运行 Gulp**:安装完成后,执行 `gulp` 命令启动 Gulp。Gulp 会监听源代码的变化,当源代码有更新时自动重新构建并刷新浏览器,实现热加载。 3. **查看应用**:打开 `index.html` 文件,即可在浏览器中看到你...

    gulp-angular-skeleton:带有构建工具的 Angular 项目的起点

    在`gulpfile.js`中,你会看到各种任务定义,每个任务都由一组Gulp插件组成,这些插件执行特定的构建步骤。 对于Angular项目来说,`gulp-angular-skeleton` 提供了以下关键功能: 1. **自动化模块加载**:Gulp可以...

    前端大厂最新面试题-tool.docx

    Babel插件的执行顺序是从左到右,从上到下,用于控制插件的执行顺序和转译规则。 预设 什么是预设?预设是指Babel的预设配置,用于简化配置和提升转译速度。 @babel/polyfill 什么是@babel/polyfill?@babel/...

    前端开源库-executive

    4. **测试自动化**:在测试框架如Jest或Mocha中,"executive"可以帮助编写和执行测试用例,特别是对于需要顺序执行或有依赖关系的测试。 5. **模块化开发**:通过模块化组织代码,"executive"可以协助开发者构建可...

    keto-meal-builder:拖放n餐食生成器以进行快速宏计数

    Gulp任务将自动运行,但要手动运行它们: 构建Javascript:这将按名称顺序将js文件连接在一起: gulp build-js 建筑SASS gulp build-sass 压缩影像 gulp build-images 在客户端上使用JS节点模块 gulp build-...

    gulp-recipe-autoprefixer:使用 autoprefixer 预处理 css 文件的接收

    命令order.autoprefixer 默认值:100类型:整数css 处理序列中自动前缀任务的顺序。应用程序接口二手挂钩 管道.devProcessCss* 为开发环境注册 css autoprefixer 处理。 管道.processCss* 为 dist 环境注册 css ...

    gulpfile.js-1:全包

    1. **Gulp任务定义**:使用`gulp.task()`函数定义任务,如`gulp.task('default', function() {...})`,其中'default'是任务名,可以作为默认任务运行。 2. **流处理**:Gulp使用Node.js的Stream概念,允许数据在...

    Node.js-⌨️Sake的命令行界面

    5. **任务依赖与链式调用**: 你可以定义任务间的依赖,确保任务按特定顺序执行: ```javascript task('build', function() { // Build tasks here }); task('deploy', ['build'], function() { // Deploy ...

    前端开源库-grunt-debug-task

    在调试 Grunt 任务时,开发者通常会遇到的问题包括任务执行顺序错误、插件配置不当、语法错误等,通过 Node Inspector,这些问题可以得到直观且详尽的调试。 在压缩包 "grunt-debug-task-master" 中,通常会包含...

    解决问题

    - **性能优化**:如果gulp任务运行缓慢,可能需要优化文件读写操作,或者调整任务执行顺序,避免不必要的文件重读和重写。 - **插件版本管理**:保持npm包更新至最新版本可以获取最新的特性和性能提升,但同时要...

Global site tag (gtag.js) - Google Analytics