我尝试在 Gulp 中丑化 Browserify 的输出,但它不起作用。
gulpfile.js
var browserify = require('browserify');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function() {
return browserify('./source/scripts/app.js')
.bundle()
.pipe(source('bundle.js'))
.pipe(uglify()) // ???
.pipe(gulp.dest('./build/scripts'));
});
据我了解,我无法按照以下步骤进行操作。我需要在一根管道中制作以保留顺序吗?
gulp.task('browserify', function() {
return browserify('./source/scripts/app.js')
.bundle()
.pipe(source('bundle.js'))
.pipe(uglify()) // ???
.pipe(gulp.dest('./source/scripts'));
});
gulp.task('scripts', function() {
return grunt.src('./source/scripts/budle.js')
.pipe(uglify())
.pipe(gulp.dest('./build/scripts'));
});
gulp.task('default', function(){
gulp.start('browserify', 'scripts');
});
你实际上已经非常接近了,除了一件事:
- 你需要转换流媒体乙烯基文件对象由以下给出
source()
with vinyl-buffer
因为gulp-uglify
(和大多数 gulp 插件)适用于buffered乙烯基文件对象
所以你可以用这个代替
var browserify = require('browserify');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
gulp.task('browserify', function() {
return browserify('./source/scripts/app.js')
.bundle()
.pipe(source('bundle.js')) // gives streaming vinyl file object
.pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
.pipe(uglify()) // now gulp-uglify works
.pipe(gulp.dest('./build/scripts'));
});
或者,您可以选择使用vinyl-transform
相反,它同时照顾两者流媒体 and buffered为您提供乙烯基文件对象,就像这样
var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var uglify = require('gulp-uglify');
gulp.task('build', function () {
// use `vinyl-transform` to wrap the regular ReadableStream returned by `b.bundle();` with vinyl file object
// so that we can use it down a vinyl pipeline
// while taking care of both streaming and buffered vinyl file objects
var browserified = transform(function(filename) {
// filename = './source/scripts/app.js' in this case
return browserify(filename)
.bundle();
});
return gulp.src(['./source/scripts/app.js']) // you can also use glob patterns here to browserify->uglify multiple files
.pipe(browserified)
.pipe(uglify())
.pipe(gulp.dest('./build/scripts'));
});
上述两种方法都会达到同样的效果。
它只是关于你想要如何管理你的管道(在常规 NodeJS Streams 和流式乙烯基文件对象和缓冲乙烯基文件对象之间转换)
编辑:
我写了一篇关于使用 gulp + browserify 和不同方法的较长文章:https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623 https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)