gulp browserify reactify任务相当缓慢 [英] gulp browserify reactify task is quite slow

问题描述

我使用Gulp作为我的任务跑步者，并通过browserify捆绑我的CommonJs模块。

我注意到运行我的browserify任务非常慢，大约需要2 - 3秒，而我所拥有的就是React和我构建的一些非常小的组件

有没有加快任务的方法，或者我的任务中有任何明显的问题？

  gulp.task（'browserify'，function（）{
 var bundler = browserify（{
 entries：['./main.js'] ，//只需要初始文件
 transform：[reactify]，//将JSX转换为javascript 
 debug：true，cache：{}，packageCache：{}，fullPaths：true 
}） ; 
 
 var watcher = watchify（bundler）; 
 
返回观察者
 .on（'update'，function（）{//更新时任何文件更新
 var updateStart = Date.now（）; 
 watcher.bundle（）
 .pipe（source（'bundle.js'））
 .pipe（gulp.dest（' ''））; 
 console.log（'Updated'，（Date.now（） -  updateStart）+'ms'）; 
}） 
 .bundle（）//在开始任务时创建初始包
 .pipe（source（'bundle.js'））
 .pipe（gulp.dest（'./'）） ; 
}）; 
  

我使用的是Browserify，Watchify，Reactify和乙烯基源码流以及其他一些不相关的模块。

  var browserify = require（'browserify'），
 watchify = require（'watchify'），
 reactify = require（'reactify'），
 source = require（'vinyl-source-stream'）; 
  

谢谢

解决方案 div>

请参阅快速browserify使用watchify构建。请注意，唯一传递给browserify的是主入口点，并且是watchify的配置。

转换已添加到watchify包装中。

_{代码来自文章粘贴逐字} >

  var gulp = require（'gulp'）; 
 var gutil = require（'gulp-util'）; 
 var sourcemaps = require（'gulp-sourcemaps'）; 
 var source = require（'vinyl-source-stream'）; 
 var buffer = require（'vinyl-buffer'）; 
 var watchify = require（'watchify'）; 
 var browserify = require（'browserify'）; 
 
 var bundler = watchify（browserify（'./ src / index.js'，watchify.args））; 
 //在这里添加任何其他browserify选项或转换
 bundler.transform（'brfs'）; 
 
 gulp.task（'js'，bundle）; //所以你可以运行`gulp js`来构建文件
 bundler.on（'update'，bundle）; //在任何dep更新时，运行打包程序
 
函数bundle（）{
返回bundler.bundle（）
 //记录错误（如果它们发生的话）
 .on （'error'，gutil.log.bind（gutil，'Browserify Error'））
 .pipe（source（'bundle.js'））
 //可选，如果你不需要sourcemaps，请删除
 $ b .pipe（sourcemaps.write（'./'）$ b .pipe（buffer（））
 .pipe（sourcemaps.init（{loadMaps：true}））//从browserify文件加载地图
 .pipe ））//写入.map文件
 // 
 .pipe（gulp.dest（'./ dist'））; 
} 
  

I am using Gulp as my task runner and browserify to bundle my CommonJs modules.

I have noticed that running my browserify task is quite slow, it takes around 2 - 3 seconds, and all I have is React and a few very small components I have built for development.

Is there a way to speed up the task, or do I have any noticeable problems in my task?

gulp.task('browserify', function() {
  var bundler = browserify({
    entries: ['./main.js'], // Only need initial file
    transform: [reactify], // Convert JSX to javascript
    debug: true, cache: {}, packageCache: {}, fullPaths: true
  });

  var watcher  = watchify(bundler);

  return watcher
  .on('update', function () { // On update When any files updates
    var updateStart = Date.now();
        watcher.bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./'));
        console.log('Updated ', (Date.now() - updateStart) + 'ms');
  })
  .bundle() // Create initial bundle when starting the task 
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('./'));
});

I am using Browserify, Watchify, Reactify and Vinyl Source Stream as well as a few other unrelated modules.

var browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify'),
source = require('vinyl-source-stream');

Thanks

解决方案

See fast browserify builds with watchify. Note that the only thing passed to browserify is the main entry point, and watchify's config.

The transforms are added to the watchify wrapper.

_{code from article pasted verbatim}

var gulp = require('gulp');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var watchify = require('watchify');
var browserify = require('browserify');

var bundler = watchify(browserify('./src/index.js', watchify.args));
// add any other browserify options or transforms here
bundler.transform('brfs');

gulp.task('js', bundle); // so you can run `gulp js` to build the file
bundler.on('update', bundle); // on any dep update, runs the bundler

function bundle() {
  return bundler.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    // optional, remove if you dont want sourcemaps
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
      .pipe(sourcemaps.write('./')) // writes .map file
    //
    .pipe(gulp.dest('./dist'));
}

这篇关于gulp browserify reactify任务相当缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！