Gulp合并流

Question

我第一次使用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 /文件夹中获取任何其他脚本文件

Answer 1

您应该只在自定义脚本上运行uglify()，因为您正在使用的jQuery和Bootstrap版本已经缩小/升级，这会浪费处理时间并降低构建脚本的速度。另外，我建议您从自己编写的自定义代码中保存下载的库。将jQuery和Bootstrap保存在lib文件夹中，将代码保存在src文件夹中。然后，您可以使用通配符globs来获取所有文件，而不是指定单个文件。

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'])

Answer 2

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

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