峡谷汇流

Question

我第一次使用gullow。我设法为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/folder 中没有得到任何其他脚本文件

Answer 1

您应该只在自定义脚本上运行uglify()，因为您使用的jQuery和Bootstrap版本已经缩小/u，这会浪费处理时间并降低构建脚本的速度。此外，我建议将您下载的库与您编写的自定义代码保存在不同的文件夹中。将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())