Question

我有一个包含2个任务的gulp文件，它们对一组文件执行完全相同的操作，然后唯一的区别是输入文件和输出名称和目标。有没有办法可以使用相同的任务来处理2批文件而不重复代码？我想这是某种功能。我已经尝试传递参数并在谷歌上查找，但可以找到我试图实现的任何示例。

var outPutFolder = '../';

//Array of all the JS files to compile for scripts.min.js
var js = [
    'js/library/_helpers.js',
    'js/library/_form-validation.js',
    'js/page/_global.js',
    'js/library/_ga_event_tracking.js',
    'js/library/_postcode-anywhere.js',
    'js/library/_count-down-timer.js',
    'js/page/_home-page.js',
    'js/page/_main_navigation.js',
    'js/page/_myaccount.js',
];

//Array of all the JS files to compile for scripts-external.min.js
var externalJs = [
    'js/external/_bootstrap.min.js',
    'js/external/_bootstrap-select.js',
    'js/external/_bootbox.min.js',
    'js/external/_jquery.lazyload.js',
    'js/external/_jquery.bxslider.js',
];

//JS Task to check files for errors, compile and then minify
gulp.task('scripts', function() {
  return gulp.src(js)
      .pipe(eslint())
      .pipe(eslint.format())
      .pipe(concat('scripts.min.js'))
      .pipe(gulp.dest(outPutFolder + 'js'))
      .pipe(notify({ title:"scripts.min.js",message: "Successfully Compiled", onLast: true }))
      .on('end', function () { gutil.log('scripts.min.js compiled successfully!'); });
});

//JS Task to check files for errors, compile and then minify
gulp.task('scriptsExternal', function() {
  return gulp.src(externalJs)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(concat('scripts-external.min.js'))
    .pipe(gulp.dest(outPutFolder + 'js'))
    .pipe(notify({ title: "scripts-external.min.js", message: "Successfully Compiled", onLast: true }))
    .on('end', function () { gutil.log('scripts-external.min.js compiled successfully!'); });
});

Answer 1

变式1：

gulpfile是纯JavaScript，因此您可以使用一个函数。但是，如果按顺序使用此任务，则必须返回文件流。试试这个：

var outPutFolder = '../';

//Array of all the JS files to compile for scripts.min.js
var js = [ … ];

//Array of all the JS files to compile for scripts-external.min.js
var externalJs = [ … ];

function doStuff(in, out) {
  return gulp.src(in)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(concat(out))
    .pipe(gulp.dest(outPutFolder + 'js'))
    .pipe(notify({ title: out,message: "Successfully Compiled", onLast: true }))
    .on('end', function () { gutil.log(out + ' compiled successfully!'); });
}

//JS Task to check files for errors, compile and then minify
gulp.task('scripts', function() {
  return doStuff(js, 'scripts.min.js');
});

//JS Task to check files for errors, compile and then minify
gulp.task('scriptsExternal', function() {
  return doStuff(externalJs, 'scripts-external.min.js');
});

变体2：

或者您可以使用environment variables

来触发此操作

var outPutFolder = '../';

//Array of all the JS files to compile for scripts.min.js
var js = [ … ];

//Array of all the JS files to compile for scripts-external.min.js
var externalJs = [ … ];

var in = gutil.env.external ? externalJs : js;
var out = gutil.env.external ? 'scripts-external.min.js' : 'scripts.min.js';

//JS Task to check files for errors, compile and then minify
gulp.task('scripts', function() {
  return gulp.src(in)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(concat(out))
    .pipe(gulp.dest(outPutFolder + 'js'))
    .pipe(notify({ title: out,message: "Successfully Compiled", onLast: true }))
    .on('end', function () { gutil.log('scripts.min.js compiled successfully!'); });
});

使用

运行任务

gulp scripts --external

Gulp传入文件进行处理

1 个答案: