连接到现有文件

Question

我正在使用gulp来缩小和连接我的js。目前这是我的gulpfile：

var gulp = require('gulp'),
    gp_concat = require('gulp-concat'),
    gp_uglify = require('gulp-uglify'),
gulp.task('js-concat-and-minify', function() {
    return gulp.src([
        './public/assets/bower_components/jquery/dist/jquery.js',
        './public/assets/bower_components/bootstrap/dist/js/bootstrap.js',
        './public/assets/bower_components/angular/angular.js',
        './public/assets/bower_components/angular-route/angular-route.js',
        './public/assets/bower_components/angular-cookies/angular-cookies.js',
    './public/app/**/*.js'
    ])
    .pipe(gp_concat('bundle.min.js'))
    .pipe(gulp.dest('./public/'))
    .pipe(gp_uglify())
    .pipe(gulp.dest('./public/'))
});
// default task...

事情是这样的：每个 angular/jquery/bootstrap 文件都已经有一个缩小版本，所以我不想每次都缩小它们。我想采用angular/jquery/bootstrap的缩小版本，将它们连接成一个文件，然后缩小我自己的js文件，位于'./public/app/**/*.js'下，并将它们连接到同一个文件与我上面的库。我该怎么做？

谢谢。

Answer 1

您可以将任务分为三个任务。第一个任务将捆绑所有缩小的供应商文件，然后将结果放在一个临时文件夹中。第二个任务将捆绑和缩小您未缩小的文件。然后在第三个任务（你调用的任务）中，对前两个任务产生依赖关系并捆绑结果。

gulp.task('bundleVendors', function() {
    return gulp.src([*your already minified files*])
    .pipe(gp_concat('bundle.min.js'))
    .pipe(gulp.dest('./temp/'));
}
gulp.task('bundleAndMinifyAppJs', function() {
    return gulp.src([*your not minified files*])
    .pipe(gp_concat('app.min.js'))
    .pipe(gp_uglify())
    .pipe(gulp.dest('./temp/'));
});
gulp.task('js-concat-and-minify', ['bundleVendors', 'bundleAndMinifyAppJs'], function() {
    return gulp.src(['./temp/app.min.js', './temp/bundle.min.js'])
    .pipe(gp_concat('bundle.min.js'))
    .pipe(gulp.dest('./public/'));
});