2

我正在尝试复制转换的行为watchify，brfs但我需要brfs直接使用，因为我想避免在使用requirebrowserify/watchify 时添加到脚本中的额外代码。直接使用brfs只是require(theFile)用它的内容替换，没有别的。

使用此命令捆绑以下代码会产生我想要的结果：

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在发生变化时再次捆绑脚本？

4

3 回答 3

2

I consider this approach using the brfs programmatic api to be most proper. The only difference from the example we discussed in the js chat is that you need to use fs.createReadStream to pipe the file into brfs, rather than passing the filename directly to brfs as we were doing.

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

Now run this command and you're all set:

gulp watch-templates

gulp is not necessary here. You can recreate this using any task runner or by executing a node script directly. You can use gaze directly to watch the files, which is the same watcher that gulp is using for gulp.watch.

于 2015-03-25T22:25:46.497 回答
1

你可以试试gulp-shell，

那么 gulp 任务将是 

gulp.task('default', shell.task(['brfs main.js > bundle.js']);
于 2015-03-25T07:38:16.563 回答
1

不确定这是否适合您的情况......但您也可以使用这个插件来检测新文件并将它们输出：

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

使用较少文件并与一个连接的 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'));
});
于 2015-03-25T14:13:23.583 回答