gulp合并文件的疑惑

1、gulp.task的返回值是什么?是否可以var xx = gulp.task()这样保存一下后续接着使用?
2、如果1的答案是否定,那么怎么实现合并文件作为一个task,压缩文件作为一个task?像这样

gulp.task('concatJs',function(){})
gulp.task('uglifyJs',function(){})
阅读 5k
1 个回答

我们可以很灵活的跟stream玩耍

var mergeStream = require("merge-stream")

var concatJsTask = function(){...} //必须return一只stream
var uglifyJsTask = function(){...} 

gulp.task('concatJs',concatJsTask)
gulp.task('uglifyJs',uglifyJsTask)

gulp.task('all',function(){
    let concatJs = concatJsTask()
    let uglifyJs = uglifyJsTask()

    //其他操作
    concatJs = concatJs.pipe(...).pipe(...)
    uglifyJs = uglifyJs.pipe(...).pipe(...)
    
    return mergeStream([concatJS,uglifyJS])
})

回复@wangbeggar

合并压缩写在一起了,而且有四个文件,怎么分离呢?
...

可以简化成这样的,但是不太清楚楼主的具体需求,其实还有很多可以灵活组合的地方

var concatJsTask = function(){

var indexJs =  gulp.src(indexJsFiles)
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dest'))
    .pipe(rename({extname: '.min.js'}))
var phoneJs = gulp.src(phoneJsFiles)
    .pipe(concat('phone.js'))
var phoneViewJs = gulp.src(phoneViewJsFiles)
    .pipe(concat('phoneView.js'))
var caseJs = gulp.src(['src/mobile/case.js'])
return merge(indexJs,phoneJs,phoneViewJs,caseJs)
    .pipe(uglify())
    .pipe(replace(/js(\d{14})/g, 'js' + data))
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest('dest'));
}

分离的话可以这样


var gulp = require("gulp");
var through = require("through2");
var mergeStream = require("merge-stream")

var indexJsTask = myTask("indexJs",function(){
    return gulp.src(indexJsFiles)
        .pipe(concat('app.js'))
        .pipe(rename({extname: '.min.js'}))
});

var balaJSTask = myTask("balaJS",function(){
    return gulp.src(balaJS)
        .pipe(concat('balajs.js'))
        .pipe(balabala())
});

myTask("all",function(){
    return mergeStream(indexJsTask,balaJSTask)
});

//封装一只高阶task函数
function myTask(taskname,fn){
    gulp.task(taskname,function(){
        return fn().pipe(finalDest())
    });
    return fn
}

//分离通用的Pipe步骤
function finalDest(){
    var entryPipe = through.obj()
    
    entryPipe.pipe(uglify())
        .pipe(replace(/js(\d{14})/g, 'js' + data))
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest('dest'));
   
    return entryPipe;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进