将 Browserify 添加到现有的 Gulp 任务

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"))

});