如何使用Watchify？

Question

我在windows环境下使用gulp，需要使用watchify。

在我的gulp文件中，我编写了以下代码--

var bundlePaths = {
    src: [
        './js/**/*.js',
        "!./js/lib/*.js" // Don't bundle libs
    ],
    dest:'build/js/'
}


// Hack to enable configurable watchify watching
var watching = false
gulp.task('enable-watch-mode', function() { watching = true })

// Browserify and copy js files
gulp.task('browserify', watchify(function(watchify) {
    return gulp.src(bundlePaths.src)
        .pipe(watchify({
            watch:watching
        }))
        .pipe(gulp.dest(bundlePaths.dest))
}))

gulp.task('watchify', ['enable-watch-mode', 'browserify']);

在控制台中，当我运行命令gulp时，我得到以下错误--

TypeError: Cannot read property 'cache' of undefined
    at watchify (C:\inetpub\wwwroot\RTB_CURRENT\IM.Application\IM.Application\UI
\node_modules\watchify\index.js:14:27)
    at Object.<anonymous> (C:\inetpub\wwwroot\RTB_CURRENT\IM.Application\IM.Appl
ication\UI\gulp-build\tasks\kernel.js:147:25)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at requireDir (C:\inetpub\wwwroot\RTB_CURRENT\IM.Application\IM.Application\
UI\node_modules\require-dir\index.js:112:33)
    at requireDir (C:\inetpub\wwwroot\RTB_CURRENT\IM.Application\IM.Application\
UI\node_modules\require-dir\index.js:72:33)

请告诉我如何解决以下问题。

Answer 1

我稍微修改了一下你的gulp文件，它似乎对我很有效

(function() {
  'use strict';

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

  var files = [];
  var globFiles = glob.sync("./js/**/*.js");
  for (var i = 0; i < globFiles.length; i++) {
    if (globFiles[i].indexOf("./js/lib") !== 0) {
      files.push(globFiles[i]);
    }
  }

  var browserifyWatch = watchify(browserify({
    cache: {},
    packageCache: {},
    debug: true,
    entries: files
  }));

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

  gulp.task('js', bundle);
  browserifyWatch.on('update', bundle);

  gulp.task('default', ['js']);
}());

有关更多详细信息，请参阅此链接https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md

Answer 2

谢谢你的feedback..however，我的要求已经更改了..Sorry。现在新的代码如下:--

var precompiledTemplatesBundle = {
    templates: [Paths.TemplatesAppDir + "/expiredsourcecodelandingtemplate.html",
                    Paths.TemplatesAppDir + "/payrolllandingtemplate.html",
                    Paths.TemplatesAppDir + "/iusaccountrecoveryhelptemplate.html",
                    Paths.TemplatesAppDir + "/iussigninhelptemplate.html",
                    Paths.TemplatesAppDir + "/iusmfasigninhelptemplate.html",
                    Paths.TemplatesAppDir + "/iusaccountupdatehelptemplate.html",
                    Paths.TemplatesAppDir + "/quickbookslandingtemplate.html",
                    Paths.TemplatesAppDir + "/voucherchecktemplate.html", 
                    Paths.TemplatesAppDir + "/standardchecktemplate.html",
                    Paths.TemplatesAppDir + "/walletchecktemplate.html", 
                    Paths.TemplatesAppDir + "/checks-atf.html",
                    Paths.TemplatesAppDir + "/checks-btf.html",
                    Paths.TemplatesAppDir + "/orderhistory.html", 
                    Paths.TemplatesAppDir + "/hometemplate_atf.html",
                    Paths.TemplatesAppDir + "/hometemplate_btf.html"]
};

gulp.task('templates-clean', function (cb) {
    del(['build/templates/'], { force: true }, cb);
});

gulp.task('templates', ['templates-clean'], function() {
    utils.templateTaskStream(precompiledTemplatesBundle.templates)
        .pipe(declare({
            namespace : "IMTemplates",
            noRedeclare: true
        }))
        .pipe(concat('precompiledTemplates' + templatesVersion + '.js'))
        .pipe(wrapAMD({
            //deps: ['handlebars','helpers/AccountFoundViewHelper'],
            // params: ['Handlebars'],
            exports: ["this['IMTemplates']"]
        }))
        .pipe(uglify())
        // .pipe(gzip({append: false, gzipOptions: { level: 9 } }))
        .pipe(gulp.dest('build/templates/'));
});




//add custom browserify options here
var customOpts = {
  entries: ['./js/app.js'],
  debug: true,
  cache: {},
  packageCache: {}
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts)); 

// add transformations here
// i.e. b.transform(coffeeify);

gulp.task('watchify', ['templates']); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal

function bundle() {
  return b.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('precompiledTemplates' + templatesVersion + '.js'))
    // optional, remove if you don't need to buffer file contents
    .pipe(buffer())
    // optional, remove if you dont want sourcemaps
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
       // Add transformation tasks to the pipeline here.
    .pipe(sourcemaps.write('./')) // writes .map file
    .pipe(gulp.dest('build/templates/'));
}

所以它构建了文件夹名称- updated...so，并且在更新模板时，file..it应该自动使用以下代码尝试--

B.on(‘更新’，‘模板’)；

所以它是说，事件侦听器应该是一个函数...那么，如果模板文件中有任何更改，我们如何再次调用模板任务。