如何使用Watchify？

Question

我在Windows環境中使用gulp並需要使用watchify。

在我一飲而盡文件我寫了下面的代碼 -

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']); 

在控制檯當我運行命令一飲而盡watchify我正在以下error--

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

我修改你的文件，一飲而盡一點點，似乎爲我工作

(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我的要求是改變..對不起，那個。現在新的代碼如下： -

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

所以它建立在文件夾[文件夾名稱 - 模板]和更新模板file..it應自動更新...所以我試着用下面的代碼 -

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

所以它說，事件監聽器應該是一個功能... 所以如何在模板文件中更改任何內容時再次調用模板任務。