zoukankan      html  css  js  c++  java
  • gulp顺序执行任务

    gulp的任务的执行是异步的。 
    所以,当我写完一系列的任务,准备一股脑地执行。

    #
    gulp.task('prod', ['clean', 'compass', 'image', 'style', 'html', 'ftp']);  
    
    [10:22:54] Starting 'clean'...
    [10:22:54] Starting 'compass'...
    [10:22:54] Starting 'imagemin'...
    [10:22:54] Starting 'style'...
    [10:22:54] Starting 'html'...
    [10:22:54] Starting 'ftp'...
    [10:22:54] Finished 'style' after 88 ms
    [10:22:54] Finished 'html' after 86 ms
    [10:22:54] Finished 'clean' after 255 ms
    [10:22:54] Finished 'ftp' after 549 ms
    [10:22:55] Finished 'compass' after 1.5 s
    [10:22:56] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%)
    [10:22:56] Finished 'imagemin' after 2.46 s
    [10:22:56] Starting 'prod'...
    [10:22:56] Finished 'prod' after 14 μs
    

    这不是我想要的/(ㄒoㄒ)/~~。任务完全错乱了。ftp上并没有看到我要的文件,因为其他任务还没执行完ftp任务就已经执行了。

    我想要的是:('clean', 'compass', [image', 'style', 'html'],'ftp'),圆括号里面串行,中括号里面并行。可以给每个任务写依赖,但是好麻烦,而且有时候多个依赖,依赖与依赖之间依赖。算了。用插件。

    var runSequence = require('gulp-run-sequence');  
    gulp.task('prod', function(cb) {  
        runSequence('clean', 'compass', ['image', 'style', 'html'], 'ftp', cb);
    });
    
    [15:20:32] Starting 'prod'...
    [15:20:32] Starting 'clean'...
    [15:20:32] Finished 'clean' after 23 ms
    [15:20:32] Starting 'compass'...
    [15:20:33] Finished 'compass' after 1.21 s
    [15:20:33] Starting 'image'...
    [15:20:33] Starting 'style'...
    [15:20:33] Starting 'html'...
    [15:20:33] Finished 'style' after 49 ms
    [15:20:33] Finished 'html' after 55 ms
    [15:20:36] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%)
    [15:20:36] Finished 'image' after 2.26 s
    [15:20:36] Starting 'ftp'...
    [15:20:36] Finished 'ftp' after 82 ms
    [15:20:36] Finished 'prod' after 3.58 s
    

    【2015/7/13 update: gulp-run-sequrence插件https://www.npmjs.com/package/gulp-run-sequence 已弃用了,可以用gulp-sequence代替https://github.com/teambition/gulp-sequence 】

    解决。

    也可以用gulp 4.0, 虽然还没正式发布,但是试用了一下,超好。

    首先我们要卸了之前装的3.x先,然后重装4.0

    # 卸载全局的 gulp
    $ npm uninstall gulp -g
    
    # 安装全局的 gulp 4.0
    $ npm install "gulpjs/gulp-cli#4.0" -g
    $ npm install "gulpjs/gulp#4.0" -g
    
    # 到项目目录里删掉本地的 gulp
    $ npm rm gulp --save-dev
    
    # 安装本地的 gulp 4.0
    $ npm install "gulpjs/gulp#4.0" --save-dev
    

    然后。就可以这样写我们的任务了

    #
    gulp.task('prod', gulp.series('clean', 'compass', gulp.parallel('image', 'style', 'html'), 'ftp'));  
    

    series里的任务是顺序执行的,parallel里的任务是同时执行的。

    执行gulp prod看一下效果

    [15:36:53] Starting 'prod'...
    [15:36:53] Starting 'clean'...
    [15:36:54] Finished 'clean' after 24 ms
    [15:36:54] Starting 'compass'...
    [15:36:55] Finished 'compass' after 1.28 s
    [15:36:55] Starting 'parallel'...
    [15:36:55] Starting 'image'...
    [15:36:55] Starting 'style'...
    [15:36:55] Starting 'html'...
    [15:36:55] Finished 'style' after 67 ms
    [15:36:55] Finished 'html' after 67 ms
    [15:36:57] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%)
    [15:36:57] Finished 'image' after 2.25 s
    [15:36:57] Finished 'parallel' after 2.25 s
    [15:36:57] Starting 'ftp'...
    [15:36:57] Finished 'ftp' after 63 ms
    [15:36:57] Finished 'prod' after 3.62 s
    

    关于4.0: https://github.com/gulpjs/gulp/issues/803

  • 相关阅读:
    html问题记录20180529
    html问题记录20180518
    html问题记录20180515
    Redis持久化--AOF
    Redis持久化--RDB
    Redis事件模型
    两个字符串的编辑距离-动态规划方法
    Reactor事件模型在Redis中的应用
    事件驱动模式--Reactor
    IO多路复用--总结
  • 原文地址:https://www.cnblogs.com/chris-oil/p/5283267.html
Copyright © 2011-2022 走看看