标签: watchify

我创建了一个gulp任务,用于使用browserify捆绑模块,我使用watchify来监视更改.以下是watchify的gulp任务:

gulp.task('watch:browserify', function () {
    var opts = assign({}, watchify.args, {
        entries: ['./js/app.js'],
        debug: true,
        basedir: './app/',
        paths: ['./lib']
    });

    var b = watchify(browserify(opts));

    b.on('update', function () {
        bundle();
    });

    function bundle() {
        gutil.log(gutil.colors.blue("Starting Browserify..."));
        var time = Date.now();
        return b.bundle()
            .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error')))
            .pipe(source('bundle.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('app'))
            .on('end', function () {
                var duration = Date.now() - time;
                gutil.log(gutil.colors.blue('Finished Browserify') + " (%dms)", duration);
            })
    }

    bundle();
});

如果我编辑主js文件(./js/app.js),则始终检测到更改.但是,当我编辑主文件所需的其他文件时,大致每隔一段时间(但并非总是)检测到更改.我在这里做错了吗？

这是完整的Github回购,所以也许你完全了解我如何计划这个工作

我刚刚开始使用Browserify,gulp我遇到了使用的示例watchify.

我不明白的是,为什么不使用gulp.watch呢？和
之间有什么区别？watchifygulp.watch

每次watchify检测到更改时,捆绑时间都会变慢.我的gulp任务肯定有问题.任何想法？

gulp.task('bundle', function() {
    var bundle = browserify({
            debug: true,
            extensions: ['.js', '.jsx'],
            entries: path.resolve(paths.root, files.entry)
        });

    executeBundle(bundle);
});

gulp.task('bundle-watch', function() {
    var bundle = browserify({
        debug: true,
        extensions: ['.js', '.jsx'],
        entries: path.resolve(paths.root, files.entry)
    });

    bundle = watchify(bundle);
    bundle.on('update', function(){
        executeBundle(bundle);
    });
    executeBundle(bundle);

});

function executeBundle(bundle) {
    var start = Date.now();
    bundle
        .transform(babelify.configure({
            ignore: /(bower_components)|(node_modules)/
        }))
        .bundle()
        .on("error", function (err) { console.log("Error : " + err.message); })
        .pipe(source(files.bundle))
        .pipe(gulp.dest(paths.root))
        .pipe($.notify(function() {
            console.log('bundle finished in ' + (Date.now() - start) + …

我正在使用Gulp作为我的任务运行器并使用浏览器来捆绑我的CommonJs模块.

我注意到运行我的browserify任务非常慢,大约需要2到3秒,我所拥有的只是React和我为开发构建的一些非常小的组件.

有没有办法加快任务,或者我的任务中是否有任何明显的问题？

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('./'));
});

我正在使用Browserify,Watchify,Reactify和Vinyl Source Stream以及其他一些不相关的模块. …

我有一个"中等"的Typescript应用程序(在很简单,但不是企业级,数千行)依赖于jQuery,React和SocketIO - 以及其他较小的库.

我目前的gulpfile是这样的:

var gulp = require("gulp"),
    $ = require("gulp-load-plugins")(),
    _ = require("lodash"),
    tsify = require("tsify"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream"),
    debowerify = require("debowerify"),
    watchify = require("watchify"),
    lr = require("tiny-lr"),
    buffer = require("vinyl-buffer");

var lrServer = lr();

var config = {
    scripts: {
        base: __dirname + "/Resources/Scripts",
        main: "Application.ts",
        output: "App.js"
    },

    styles: {
        base: __dirname + "/Resources/Styles",
        sheets: ["Application.less", "Preload.less"],
        autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
    }, …

这是一个典型的工作流程:

1. 编辑JS文件
2. 保存文件,watchify会自动开始为我重建它
3. alt-tab到浏览器
4. ctrl + R重新加载页面

这很好,除非watchify需要比第3步和第4步更长的时间,因为你得到过时的代码或错误,它很糟糕.

有没有一种简单的方法来保证永远不会发生？就像watchify向我的服务器发出信号的方式一样,它应该在尝试加载请求的页面之前等待另一秒钟？如果不存在这样的事情,人们如何在实践中处理这个问题？

我必须嘲笑谷歌,因为我甚至找不到人们在谈论这个问题,除了这个说"添加一个简单的(基于节点的)服务器,它将阻止请求,直到手表完成运行:这将避免总是令人沮丧重新加载页面只是为了找到手表尚未完全运行的现象." - 但不幸的是,这是todo列表中的条目,而不是该回购中存在的内容.

这是我的gulpfile.js

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

var paths = {
    scripts: ['src/jsx/index.jsx']
};

gulp.task('browserify', function(){


    var bundler = watchify(browserify('./src/jsx/index.jsx', watchify.args));
    bundler.transform(reactify);

    bundler.on('update', rebundle);

    function rebundle() {
        return bundler.bundle()
            // log errors if they happen
            .on('error', gutil.log.bind(gutil, 'Browserify Error'))
            .pipe(source('bundle.js'))
            .pipe(gulp.dest('./public/js'));
    }

    return rebundle();

});

gulp.task('watch', function() {
    gulp.watch(paths.scripts, ['browserify']);
});

然后我的命令行输出如下所示:

$ gulp watch

[15:10:41] Using gulpfile ~/blizztrack/dashboard/gulpfile.js
[15:10:41] Starting 'watch'... …

从watchify的文件中,我看到:

在创建browserify实例时,您必须在构造函数中设置这些属性:

var b = browserify({ cache: {}, packageCache: {}, fullPaths: true })

Run Code Online (Sandbox Code Playgroud)

3个参数cache: {}, packageCache: {}, fullPaths: true用于观察,但为什么我们应该将它们传递给browserify而不是传递给watchify？

我正在添加watchify到我们的构建过程中,但我想提出一个前提条件来监视运行,那就是更改的文件通过了我们的linting步骤(正在使用ESLint).

我在想这样做:

function runBrowserify(watch){
  var babel = babelify.configure({
      optional: ['es7.objectRestSpread']
  });
  var b = browserify({
    entries: './app/main.js',
    debug: true,
    extensions: ['.jsx', '.js'],
    cache: {},
    packageCache: {},
    fullPaths: true
  })
  .transform(babel);

  if(watch) {
    // if watch is enable, wrap this bundle inside watchify
    b = watchify(b);
    b.on('update', function(ids) {
      //run the linting step
      lint(ids);

      //run the watchify bundle step
      gutil.log(gutil.colors.blue('watchify'), 'Started');
      bundleShare(b);
    });
    b.on('time', function (time) {
      gutil.log(gutil.colors.blue('watchify'), 'Finished', 'after', gutil.colors.magenta(time), gutil.colors.magenta('ms'));
    });
  }

  bundleShare(b);
}

function …

我想设置gulp能够做两件事:1)使用watchify来监控文件中的更新并使用browserify自动重建更改,以及2)进行一次ad-hoc构建并退出.

#1似乎工作正常,但我无法让#2工作.我输入gulp build终端,所有东西都捆绑得很好,但是gulp不会退出或退出; 它只是坐在那里,我没有带回命令行.

我究竟做错了什么？这是整个gulpfile:

'use strict';

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

var b = watchify(browserify({
  cache: {},
  packageCache: {},
  entries: ['./app/app.js'],
  debug: true,
  transform: ['reactify']
}));

b.on('log', gutil.log);

var bundle = function() {
  return b.bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'));
};

gulp.task('watch', function() {
  b.on('update', bundle);
});

gulp.task('build', function() {
  bundle();
});

gulp.task('default', ['watch', 'build']);

这是我终端的输出:

[11:14:42] Using gulpfile ~/Web Dev/event-calendar/gulpfile.js
[11:14:42] Starting 'build'...
[11:14:42] …