Merging two gulp streams - gulp

Question

I am trying to merge two gulp sources as follows:
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);
});
Somehow only the first one is executed.
However, if I move the second one to another task with dependency on build then both are executed ...
Am I doing the merging the wrong way?
UPDATE 1
I updated my task to build both LESS files and JS files so I have:
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);
});
Somehow, this only executes sbm ... Does anyone knows why?
I also tried #topleft's suggestion but when including the LESS tasks at the end the app.min.js file get's the Less code in it ...

Answer 1

try this with merge2 plugin, that's how I do it
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));
});
as an example, here is how I merge my two LESS streams : (one is unCSS'ed, the other is not)
/* ===== 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 ===== */