Question

我正在尝试合并两个gulp源，如下所示：

gulp.task("build", ["clean"], function () {

  var sb = gulp.src([
    paths.bower + "jquery/jquery.js",
    paths.bower + "angular/angular.js"
  ])
    .pipe(flatten())
    .pipe(gulp.dest(paths.scripts.vnd));

 var sm = gulp.src([
   paths.scripts.vnd + "jquery.js",
   paths.scripts.vnd + "angular.js"
 ])
  .pipe(concat("app.js"))
  .pipe(gulp.dest(paths.scripts.dst))
  .pipe(rename("app.min.js"))
  .pipe(uglify())
  .pipe(gulp.dest(paths.scripts.dst));

  return merge(sb, sm);

});

不知何故只执行了第一个。

但是，如果我将第二个任务移动到依赖于构建的另一个任务，那么两个都被执行...

我是以错误的方式合并吗？

更新1

我更新了我的任务，以构建LESS文件和JS文件，所以我有：

var
  gulp = require("gulp"),  
  fs = require("fs"),
  merge = require("merge2"),
  concat = require("gulp-concat"),
  flatten = require("gulp-flatten"),
  less = require('gulp-less'),
  minify = require('gulp-minify-css'),
  rename = require("gulp-rename"),
  rimraf = require("gulp-rimraf"),
  uglify = require("gulp-uglify");

var paths = {
  bower: "./bower_components/",
  scripts: {
    app: "./" + "/scripts/app/",
    dst: "./" + "/scripts/dst/",
    vnd: "./" + "/scripts/vnd/"
  },
  styles: {
    app: "./" + project.webroot + "/styles/app/",
    dst: "./" + project.webroot + "/styles/dst/"
  }
};

gulp.task("build", function () {

  var sbm = gulp.src([
    paths.styles.app + "*.less",
    paths.styles.vnd + "*.less"
  ])
  .pipe(less())
  .pipe(minify())
  .pipe(concat("app.css"))
  .pipe(gulp.dest(paths.styles.dst))
  .pipe(rename("app.min.css"))
  .pipe(gulp.dest(paths.styles.dst));

  var scb = gulp.src(
    [
      paths.bower + "jquery/jquery.js",
      paths.bower + "angular/angular.js"
    ])
    .pipe(flatten())
    .pipe(gulp.dest(paths.scripts.vnd));

  var scm = gulp.src(
    [
      paths.scripts.vnd + "jquery.js",
      paths.scripts.vnd + "angular.js"
    ])
   .pipe(concat("app.js"))
   .pipe(gulp.dest(paths.scripts.dst))

   return merge(sbm, scb, scm);

});

不知何故，这只会执行sbm ...有谁知道为什么？

我也试过了@plepleft的建议，但是当最后包含LESS任务时，app.min.js文件会得到更少的代码...

Answer 1

尝试使用merge2插件，这就是我的工作方式

var merge = require('merge2');

gulp.task("build", ["clean"], function () {
  var sb = gulp.src([
    paths.bower + "jquery/jquery.js",
    paths.bower + "angular/angular.js"
  ])
    .pipe(flatten())
    .pipe(gulp.dest(paths.scripts.vnd));

 var sm = gulp.src([
   paths.scripts.vnd + "jquery.js",
   paths.scripts.vnd + "angular.js"
 ])

   return merge(sb, sm)
    .pipe(concat("app.js"))
    .pipe(gulp.dest(paths.scripts.dst))
    .pipe(rename("app.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.scripts.dst));

});

作为一个例子，这里是我如何合并我的两个LESS流:(一个是unCSS＆＃39; ed，另一个不是）

/* ===== LESS START ===== */
gulp.task('less', function() {
    // Get static styles
    var streamMain = gulp.src([
        srcAssets + '/less/**/*.less',
        srcAssets + '!/less/**/interactive.less',])
        // Convert to CSS
        .pipe(less())
        // Remove unused CSS rules
        .pipe(uncss({
            html: [dest + '/index.html']
        }))

    // Get dynamic styles
    var streamEvents = gulp.src(srcAssets + '/less/global/interactive.less')
        // Convert to CSS
        .pipe(less())

    // Merge dynamic and static styles
    return merge(streamMain, streamEvents)
        // Concatenate in a single file
        .pipe(concat('main.css'))
        // Remove all comments
        .pipe(stripCssComments({
            all: true
        }))
        // Autoprefixer for browser compatibility
        .pipe(autoprefixer())
        // Compression
        .pipe(minifyCSS())
        // Output file
        .pipe(gulp.dest(dest + '/css'));
});
/* ===== LESS END ===== */

合并两个gulp流

1 个答案: