Question

我创建了以下Gulp任务：

var gulp        = require('gulp');
var gulputil    = require('gulp-util');
var gulpif      = require('gulp-if');
var sourcemaps  = require('gulp-sourcemaps');
var uglify      = require('gulp-uglify');

var scriptInput = './resources/assets/scripts/*.js';

gulp.task('scripts', function() {
    var production = gulputil.env.production ? true : false;
    return gulp.src(scriptInput)
        .pipe(gulpif(!production, sourcemaps.init()))
        .pipe(gulpif(!production, sourcemaps.write()))
        .pipe(gulpif(production, uglify(options.uglify)))
        .pipe(gulp.dest(scriptOutput))
        .on('error', gulputil.log);
});

此任务获取脚本目录中的所有脚本并编译它们。根据我是否将生产标志传递给我的gulp命令，它将生成源映射或uglify生成的脚本。到目前为止一切都很好。

我的任务中缺少一件事，那就是Browserify。我在Gulp仍然是一个新手，我无法理解如何将其融入我现有的任务中。我已经看到了几个关于如何执行此操作的示例（许多使用列入黑名单的gulp-browserify包），但这些看起来更复杂，与我使用的任务非常不同。这些示例中的另一个限制是它们似乎不支持使用像我一样使用的通配符路径（请参阅示例中的变量scriptInput）。

我的问题是：是否有一种简单的方法可以将Browserify添加到此任务而不会丢失原始任务的功能，尤其是使用通配符源路径的功能？

Answer 1

首先你需要包含browserify，然后你会像下面的例子一样使用它，就像我使用vuiefy转换vue文件一样，是的，你可以看到我还需要fs

 ...(some more require here )
var fs = require("fs");
var browserify = require('browserify');
 var vueify = require('vueify');
// Compile Our Vue js
gulp.task('vueify', function() {
   return  browserify(srcpath +'js/app.js')
  .transform(vueify)
  .bundle()
  .pipe(fs.createWriteStream(destpath +"js/build.js"))

});

将Browserify添加到现有Gulp任务

1 个答案: