【问题标题】:How to use the new Browserify API?如何使用新的 Browserify API?
【发布时间】: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


    【解决方案1】:

    我是这样做的:https://raw.githubusercontent.com/furqanZafar/reactjs-image-upload/master/gulpfile.js

    var options = watchify.args;
    options.debug = true;    
    var bundler = browserify(options);
    bundler.add("./public/scripts/app.js");
    bundler.transform("reactify");
    
    var watcher = watchify(bundler);
    .
    .
    .
    

    【讨论】:

      猜你喜欢
      • 2016-02-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-17
      • 2013-08-12
      • 2015-08-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多