Gulp task return 的作用

senntyou 发布于2019-08-23 13:01 / 1673人阅读

摘要：最近的项目需要写的，大概的作用是去先去取一些文件，然后基于这些文件去生成另一些文件。由于文件之间有依赖关系，只有之间也存在先后顺序，只有当前一个结束了，后一个才能开始。结论的都要保证有或者，去通知系统任务结束。

最近的项目需要写gulp的task，大概的作用是去先去svn取一些文件，然后基于这些文件去生成另一些文件。由于文件之间有依赖关系，只有tasks之间也存在先后顺序，只有当前一个task结束了，后一个task才能开始。

使用run-sequence（https://www.npmjs.com/package...）这个插件来保证顺序，但是发现即使使用了这个插件，task之间仍然是异步的，后来网上搜索了下（https://stackoverflow.com/que...），得到以下结论，原因是我的gulp task没有return，如果不return 系统不知道什么时候task结束（Without return the task system wouldn"t know when it finished.）所以即使是在run-sequence这个插件下，也无法保证按指定顺序执行。

结论： gulp的task都要保证有return或者callback，去通知系统任务结束。（make sure they either return a stream or promise, or handle the callback

var gulp = require("gulp");
var runSequence = require("run-sequence");
var del = require("del");
var fs = require("fs");
 
// This will run in this order:
// * build-clean
// * build-scripts and build-styles in parallel
// * build-html
// * Finally call the callback function
gulp.task("build", function(callback) {
  runSequence("build-clean",
              ["build-scripts", "build-styles"],
              "build-html",
              callback);
});
 
// configure build-clean, build-scripts, build-styles, build-html as you wish,
// **but make sure they either return a stream or promise, or handle the callback**
// Example:

gulp.task("build-clean", function() {
    // Return the Promise from del()
    return del([BUILD_DIRECTORY]);
//  ^^^^^^
//   This is the key here, to make sure asynchronous tasks are done!
});
gulp.task("build-scripts", function() {
    // Return the stream from gulp
    return gulp.src(SCRIPTS_SRC).pipe(...)...
//  ^^^^^^
//   This is the key here, to make sure tasks run to completion!
});

gulp.task("callback-example", function(callback) {
    // Use the callback in the async function
    fs.readFile("...", function(err, file) {
        console.log(file);
        callback();
//      ^^^^^^^^^^
//       This is what lets gulp know this task is complete!
    });
});

GPU云服务器云服务器 php的return javascript的return gulp gulp4

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99162.html

重读 Gulp

摘要：当接收一个回调函数的时候，一定要注意回调函数中的参数。主要作用就是用来读取文件或者文件夹中的数据。表示文件的名称指的是发生的变化使用技巧的进一步使用，可以参照中文官网中的技巧集。 Gulp 简介 Gulp 对现在的前端而言，是一个稍微老旧的工具了，但是，为了复习以前学过的内容，还是把它翻出来，放在自己的博客中。说不定哪天又用到了呢。需要说明的是，这里使用的 Gulp 版本是 3.9....

vpants 2019-08-22 11:19 评论0 收藏0
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

摘要：地址构建基础的语法转译环境首先，安装工具，命令如下安装插件，由于需要作为依赖，因此，还要安装模块和和之间的无缝集成插件安装核心插件安装完成后，配置文件和文件，将这两个文件放在项目根目录下。 gulp + gulp-better-rollup + rollup 构建 ES6 开发环境关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 br...

XBaron 2019-08-23 17:12 评论0 收藏0
利用 Gulp 处理前端工作流程

摘要：基本用法基本根据匹配文件，返回，可以通过方法传递给后续的插件。一般用法，把中的内容按照指定的写成文件，会自动创建不存在的文件夹。，用来代理请求，可以把发送到指定的地址。常用于开发，作用同上，也用于匹配资源，但用起来简单很多。基本用法 // gulpfile.js gulp.task(foo, function() { gulp.src(glob) .pipe(...

Yangder 2019-08-21 10:37 评论0 收藏0
基于 Gulp + Browserify 构建 ES6 环境下的自动化前端项目

摘要：本文特此给大家介绍下如何使用配合来构建基于的前端项目。最后，在目录下会生成最终的项目文件。执行单元测试本例中使用进行单元测试。随着React、Angular2、Redux等前沿的前端框架越来越流行，使用webpack、gulp等工具构建前端自动化项目也随之变得越来越重要。鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目，网上的相关教程也比...

yuanxin 2019-08-19 18:05 评论0 收藏0
Gulp--手把手教你搭建前端自动化平台

摘要：前端的发展真的是快，前几年还是刀耕火种的开个编辑器，几行和代码就能上浏览器跑了。是啥官方的解释是基于流的自动化构建工具。把运动的半成品看成是数据，那么流动的数据就是流。分工明确才能提高效率，这是社会发展的经验总结。前端的发展真的是快，前几年还是刀耕火种的开个编辑器，几行html和js代码就能上浏览器跑了。现在呢？各种包，各种库，各种框架，各种编程范式。究其原因，就是我们高中社会课本中...

LeviDing 2019-08-20 18:26 评论0 收藏0