gulp - 如何使用 Gulp 将不同的 js 与不同的 js 集连接起来，然后通过管道将 minify/uglify 传输到不同的包？

Question

我想用 Gulp 归档的是：

1. 例如我目前正在编辑editing.js
2. 如果它已被更改/保存，则取出base1.js, base2.js, base3.jsout，将它们与 myediting.js顺序连接，如base1.js, base2.js, base3.js,editing.js
3. 缩小和丑化它们

4. 最后用'editing.min.js'之类的扩展名重命名这个文件。

   gulp.task('minify-js', function(){
       gulp.src('static/src/*.js')
           .pipe(concat('static/src/base.js'))
           .pipe(uglify())
           .pipe(gulp.dest('static/dist'));
   });
   

在我的情况下，我有多个源文件要连接到多个捆绑文件。

我未能存档的是重命名为我当前正在编辑的文件名，例如ex1.js，ex1.min.js它总是捆绑到一个唯一的文件中。

Gulp 新手，希望对您有所帮助，谢谢！！

Answer 1

如果我理解正确，应该这样做：

var concat = require('gulp-concat');

gulp.task('minify-js', function() {
  return gulp.src([ 'static/src/*.js', 'editing.js' ])
             .pipe(concat('editing.min.js'))
             .pipe(uglify())
             .pipe(gulp.dest('static/dist/'));
});

如您所见，无需重命名，因为gulp-concat已经要求您指定输出文件名。

编辑：这是另一种看法。它监视对任何.js文件的更改（有一些排除；而不是使用**/*.js您可以指定源文件所在的特定目录以限制可能匹配的数量）。当文件更改时，它将连接base*.js文件和更改的文件，并使用更改文件的文件名作为缩小文件名的基础（foo.js→ foo.min.js）：

var gulp   = require('gulp');
var path   = require('path');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('minify-js', function() {
  // Watch for changes on JS files, but exclude some of them.
  return gulp.watch([ 
    '**/*.js', 
    '!static/src/base*.js',
    '!node_modules/',
  ], function(ev) {
    // Watch for changes to the files.
    if (ev.type !== 'changed') return;

    // Determine 'minified' filename.
    var basename = path.basename(ev.path);
    var extname  = path.extname(basename);
    var minname  = basename.replace(extname, '.min' + extname);

    // Run the uglify chain.
    return gulp.src([ 'static/src/base*.js', ev.path ])
        .pipe(concat(minname))
        .pipe(uglify())
        .pipe(gulp.dest('static/dist/'));
  });
});