我设置了一个 gulp 文件,并且我已经适本地缩小了我的所有脚本和 css 文件,除了我的 bundle.js
和我的 homeBundle.js
。我的每个任务都运行了 uglify()
函数,但是当我尝试 gulp 时收到以下错误。
events.js:141 throw er; // Unhandled 'error' event ^ Error: /Users/Documents/RTVS360/bundle.js: Streaming not supported
当 gulp 尝试 uglify 时是否存在问题,因为它会在每次运行 gulp 时重新创建文件?
下面你可以看到我的 gulpfile。任何帮助将不胜感激。
var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
var glob = require('glob');
var streamify = require('gulp-streamify');
gulp.task('watchify', function () {
var bundler = browserify({
entries: ['./client/main.jsx'],
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () {
watcher.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dest/'));
})
.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dest/'));
});
gulp.task('browserify', function () {
var testFiles = glob.sync('./client/main.jsx');
var bundler = browserify({
entries: testFiles,
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
function rebundle() {
bundler
.bundle()
.on('error', function(err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest/'));
}
return rebundle();
});
gulp.task('home', function () {
var testFiles = glob.sync('./client/homepage.jsx');
var bundler = browserify({
entries: testFiles,
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
function rebundle() {
bundler
.bundle()
.on('error', function(err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('homeBundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest/'));
}
return rebundle();
});
// Uglify Scripts
gulp.task('scripts', function() {
gulp.src('assets/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
// Minify Styles
gulp.task('styles', function() {
gulp.src('./assets/css/**/*.css')
.pipe(uglifycss({
"max-line-len": 80
}))
.pipe(gulp.dest('./dist/css'));
});
gulp.task('default', ['browserify', 'home','scripts', 'styles']);
最佳答案
您需要将 streamify 与 gulp-uglify 一起使用。
您似乎正在导入 streamify 插件,但您没有使用它。 您应该使用 streamify 函数包装您的 uglify 调用。示例:
var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var streamify = require('gulp-streamify');
gulp.task('watchify', function () {
var bundler = browserify({
entries: ['main.jsx'],
transform: [reactify],
// You probably would like to change these two flags to false for
// production since they increase the size of your output file
debug: true,
fullPaths: true,
cache: {},
packageCache: {}
});
var watcher = watchify(bundler);
return watcher
.on('update', function () {
watcher.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('./dest/'));
})
.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(streamify(uglify())) // wrap uglify with the streamify plugin
.pipe(gulp.dest('./dest/'));
});
gulp.task('default', ['watchify']);
Gulp-uglify 本身不支持流乙烯基文件对象,因此您需要使用 streamify 插件使其支持流。
关于javascript - 我如何使用 gulp 为 React 压缩我的包文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34522788/