Gulp 合并流答案

【问题标题】：Gulp merge-streamGulp 合并流
【发布时间】：2015-12-08 05:38:36
【问题描述】：

我是第一次使用 gulp。我设法为css文件进行合并流，但不知何故它不适用于javascript文件。这是我的代码，

gulp.task('styles', () => {
  var commonStyles = gulp.src([
   'css/website/bootstrap.min.css',
   'css/website/font.css'
  ])

 // Concatenate and minify styles
 .pipe(minifyCss())
 .pipe(concat('style.min.css'))
 .pipe(gulp.dest('dist/styles'));

 var otherStyles = gulp.src([
  'css/website/landing.css',
  'css/website/careersNew1.css'
 ])
 .pipe(minifyCss())
 .pipe(gulp.dest('dist/styles'));

 return merge(commonStyles, otherStyles);

});

// Concatenate and minify JavaScript
gulp.task('scripts', () => {
 var commonScript = gulp.src([
  'js/scripts/jquery.min.js',
  'js/scripts/bootstrap.min.js'
 ])
.pipe(uglify())
.pipe(concat('style.min.js'))
.pipe(gulp.dest('dist/scripts'));

var otherScript = gulp.src([
 'js/bf_scripts.js',
 'js/custom_rbox.js'
])
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'));

return merge(commonScript, otherScript);
});

Css 输出工作正常。但是我的 dist/scripts/ 文件夹中没有任何其他脚本文件

【问题讨论】：

标签： gulp gulp-uglify

【解决方案1】：

您应该只在您的自定义脚本上运行uglify()，因为您使用的 jQuery 和 Bootstrap 版本已经被缩小/丑化了，这会浪费处理时间并减慢您的构建脚本。此外，我建议将您下载的库与您编写的自定义代码放在不同的文件夹中。将 jQuery 和 Bootstrap 保存在 lib 文件夹中，并将您的代码保存在 src 文件夹中。然后，您可以使用通配符 glob 来获取所有文件，而不是指定单个文件。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');

gulp.task('scripts', function() {
  // First, uglify custom JS that you wrote
  return gulp.src('src/scripts/**/*.js')
    .pipe(uglify())

    // Now, prepend the already-minfied JS libraries you're importing and concat into style.min.js
    .pipe(addsrc.prepend('lib/scripts/**/*.js'))
    .pipe(concat('style.min.js'))
    .pipe(gulp.dest('dist/scripts'))
})

gulp.task('default', ['scripts'])

【讨论】：

【解决方案2】：

在uglify之前尝试使用缓冲区；

var buffer = require('gulp-buffer');
.pipe(buffer())
.pipe(uglify())

【讨论】：