【发布时间】:2014-12-16 16:33:09
【问题描述】:
我目前正在做一个 ReactJS 项目,所以我决定使用 Gulp 设置一个工作流来管理丑化、缩小、JSX 转换等。
问题在于 Browserify API 不断变化(文档没有经常更新)我们不能再使用 bundle() 中的选项
正如日志错误消息所述:“将所有选项参数移动到 Browserify() 构造函数” 但并非我使用的所有选项都可用,这是我现在的代码:
var gulp = require('gulp');
var gutil = require('gulp-util');
var streamify = require('gulp-streamify');
var source = require('vinyl-source-stream');
var del = require('del');
prod = gutil.env.prod;
gulp.task('cleanjs', function(cb) {
del(['build/js'], cb);
});
gulp.task('cleancss', function(cb) {
del(['build/css'], cb);
});
gulp.task('sass', ['cleancss'], function() {
var sass = require('gulp-sass');
var concat = require('gulp-concat');
gulp.src(['./src/**/.{css, scss}'])
.pipe(sass())
.pipe(concat('livemap.min.css'))
.pipe(gulp.dest('./build/css'));
});
gulp.task('watch', function() {
var watchify = require('watchify');
var reactify = require('reactify');
var browserify = require('browserify');
var uglify = require('gulp-uglify');
var bundler = watchify(browserify('./src/main.js', {
cache: {},
packageCache: {},
fullPaths: true,
transform: ['reactify'],
debug: true,
}));
function rebundle() {
var t = Date.now();
gutil.log('Starting Watchify rebundle');
return bundler.bundle()
.pipe(source('bundle.js'))
.pipe(prod ? streamify(uglify()) : gutil.noop())
.pipe(gulp.dest('./build/js'))
.on('end', function () {
gutil.log('Finished bundling after:', gutil.colors.magenta(Date.now() - t + ' ms'));
});
}
bundler.on('update', rebundle);
gulp.watch('./src/**/*.{css, scss', ['sass']);
return rebundle();
});
gulp.task('default', ['watch']);
非常欢迎任何帮助!
【问题讨论】:
标签: javascript gulp browserify