2015-03-25 45 views
2

我试图复制的watchify行为与brfs变换捆绑,但我需要直接使用brfs,因为我想避免添加到脚本代码追加使用require与时browserify/watchify。直接使用brfs只是用它的内容替代require(theFile),没有别的。命令观看和使用BRFS没有watchify

使用此命令捆绑下面的代码生成我想要的结果:

brfs main.js > bundle.js 
// main.js 
var fs = require('fs'); 
var templates = { 
    'header': fs.readFileSync('app/templates/header.html', 'utf8'), 
    'nav-menu': fs.readFileSync('app/templates/nav-menu.html', 'utf8') 
}; 

如何设置的东西了要监视更改,并有brfs再次捆绑脚本什么的变化是什么时候?

回答

2

我考虑使用brfs编程API是最合适的这种做法。与我们在js聊天中讨论的示例唯一的区别是,您需要使用fs.createReadStream将文件传输到brfs,而不是像我们那样直接将文件名传递给brfs

var gulp = require('gulp'); 
var brfs = require('brfs'); 
var fs = require('fs'); 

// task without watch 
gulp.task('bundle-templates', function() { 
    fs.createReadStream('main.js') 
    .pipe(brfs()) 
    .pipe(fs.createWriteStream('bundle.js')) 
    ; 
}); 

// this runs the `bundle-templates` task before starting the watch (initial bundle) 
gulp.task('watch-templates', ['bundle-templates'], function() { 
    // now watch the templates and the js file and rebundle on change 
    gulp.watch([ 
    'templates/*.html', 
    'main.js' 
    ], ['bundle-templates']); 
}); 

现在运行此命令和你所有的设置:

gulp watch-templates 

gulp是没有必要在这里。您可以使用任何任务运行器或直接执行节点脚本来重新创建它。您可以直接使用gaze来观看这些文件,这些文件与gulp.watch的吞食者正在使用的观察者相同。

+0

感谢您的回答。 – 2015-03-26 03:49:50

1

你可以尝试gulp-shell

然后吞气任务是

gulp.task('default', shell.task(['brfs main.js > bundle.js']); 
1

不知道这是否会以某种方式适合您的情况......但你也可以使用这个插件,将检测新文件和管道出来:

https://www.npmjs.com/package/gulp-newy/

例如使用许多不太文件和比较反对一个concaten ated css文件:

function lessVersusOneFile(projectDir, srcFile, absSrcFile) { 
    //newy gives projectDir arg wich is '/home/one/github/foo/` 
    var compareFileAgainst = "compiled/css/application.css"; 

    var destination = path.join(projectDir, compareFileAgainst); 
    // distination returned will be /home/one/github/foo/compiled/css/application.css 
    return destination; 
} 
// all *.less files will be compared against 
// /home/one/github/foo/compiled/css/application.css 

gulp.task('compileLessToCss', function() { 
    return gulp.src('app/css/**/*.less') 
     .pipe(newy(lessVersusOneFile)) 
     .pipe(less()) 
     .pipe(gulp.dest('compiled/css')); 
});