如何使用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 watchify命令時，出現以下錯誤-

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

感謝您的反饋。但是，我的要求發生了變化。抱歉。現在新代碼如下：-

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

因此它會建立文件夾[文件夾名稱-模板]，並在更新模板文件時自動更新...因此我嘗試了以下代碼-

b.on（'update'，['templates']）;

就是說，事件監聽器應該是一個函數……因此，如果模板文件中發生任何更改，我們又如何再次調用模板任務。