美文网首页
按顺序逐个同步地运行 Gulp 任务

按顺序逐个同步地运行 Gulp 任务

作者: 壮哉我大前端 | 来源:发表于2017-03-13 19:17 被阅读0次

    写在前面

    Gulp是一个非常好用的代码发布软件(比fis3好了不知多少倍)

    但它有一个缺点(不过也是它的优点),就是它的所有任务都是异步完成的,对于一些必须要同步执行的操作,就会有问题了。

    例如我要进行一个工程的样式文件进行发布,那我要先对scss进行编译,然后对里面的图片合并为雪碧图,最后在对处理好的css进行合并压缩。

    这是一个环环相扣的任务链,这时Gulp的异步操作就不能用了。

    那怎么办呢?

    gulp-sequence

    这个gulp的社区早就有很多此类控件可以让我们调用了,例如gulp的开发文档里就有如何同步执行任务的说明(不过这个太简单了),还有国内的 Teambition 团队开源了 gulp-sequence,以及国外开发者开发的 run-sequence

    下面我就用 gulp-sequence来做为例子说说怎么顺序逐个同步地运行 Gulp 任务

    就用我上面说的样式发布的操作来做例子:

    这是编译scss的任务:

    gulp.task( 'spriteScss', function( cb ) {
        var src = [];
        src.push( cssSrc + "home/" + projectModule + '/**/*.scss' );
    
        return gulp.src( src )
            .pipe( sass().on( 'error', sass.logError ) )
            .pipe( gulp.dest( 'spriteScss' ) );
    } );
    

    合并样式文件

    gulp.task( 'spriteCss', function( cb ) {
        var src = [];
        src.push( 'spriteScss/**/*.css' );
        //- 创建一个名为 concat 的 task
        return gulp.src( src )
            //- 合并后的文件名
            .pipe( concat( projectModule + '.css' ) )
            .pipe( replace( /\(images\//g, '(../spriteImg/' ) )
            //- 输出文件本地
            .pipe( gulp.dest( 'spriteCss' ) );
    } );
    

    生成雪碧图

    gulp.task( 'spriteDest', function( cb ) {
        return gulp.src( 'spriteCss/' + projectModule + '.css' )
            .pipe( cssSprite( {
                // sprite背景图源文件夹,只有匹配此路径才会处理
                imagepath: 'spriteImg/',
                // 映射CSS中背景路径,支持函数和数组,默认为 null
                imagepath_map: null,
                // 雪碧图输出目录,注意,会覆盖之前文件!默认 images/
                spritedest: 'spriteImg/',
                // 替换后的背景路径,默认 ../images/
                spritepath: '../images/' + projectModule + '/',
                // 各图片间间距,如果设置为奇数,会强制+1以保证生成的2x图片为偶数宽高,默认 0
                padding: 2,
                // 是否使用 image-set 作为2x图片实现,默认不使用
                useimageset: false,
                // 是否以时间戳为文件名生成新的雪碧图文件,如果启用请注意清理之前生成的文件,默认不生成新文件
                newsprite: mode === "release", //判断是否发布模式,是就建以时间戳为文件名的文件,否则不建。
                // 给雪碧图追加时间戳,默认不追加
                spritestamp: false,
                // 在CSS文件末尾追加时间戳,默认不追加
                cssstamp: false
            } ) )
            .pipe( gulp.dest( 'spriteDest/' ) );
    } );
    

    那我们只要这样使用控件

    gulp.task( 'css', gulpSequence( 'spriteScss', 'spriteCss', 'spriteDest', function() {
        console.log( "输出完成!" );
    } ) );
    

    就可以完成任务的同步运行了。

    当然 gulp-sequence还不止这种用方法,如果感兴趣的话可以去它的github去了解。

    ————
    前端·小h
    纸上得来终觉浅,绝知此事要躬行

    相关文章

      网友评论

          本文标题:按顺序逐个同步地运行 Gulp 任务

          本文链接:https://www.haomeiwen.com/subject/dmjqnttx.html