2016-07-05 44 views
0

我创建了以下咕嘟咕嘟任务:添加Browserify现有咕嘟咕嘟任务

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添加到此任务中,而不会丢失原始任务的功能,尤其是使用通配符源路径的功能?

回答

0

首先,你需要包括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")) 

}); 
+0

谢谢你你的答案。不幸的是,这似乎不适用于我原来的问题。 (“我的问题是:是否有一种简单的方法可以将Browserify添加到此任务中,而不会丢失原始任务的功能,特别是使用通配符源路径的功能?”) –