在没有 watchify 的情况下使用 brfs 监视和捆绑的命令

Question

我试图用 brfs 转换复制 watchify 的行为，但我需要直接使用 brfs，因为我想避免添加额外的代码使用 require 和 browserify/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再次捆绑脚本？

Answer 1

你可以试试gulp-shell,

那么 gulp 任务就是

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

Answer 2

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

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

Answer 3

我认为这种使用 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 这里不需要。您可以使用任何任务运行ner 或直接执行节点脚本来重新创建它。您可以直接使用 gaze 来监视文件，这与 gulp 用于 gulp.watch.

的监视程序相同

在没有 watchify 的情况下使用 brfs 监视和捆绑的命令

Command to watch and bundle using brfs without watchify

javascript

watchify

brfs