Команда смотреть и связывать используя brfs без watchify

Question

Я пытаюсь повторить поведение watchify с brfs трансформировать, но мне нужно использовать 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

Я рассматриваю этот подход, используя 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 для gulp.watch,

Answer 2

Вы можете попробовать глоток,

тогда глотком будет

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

Answer 3

Не уверен, что это как-то подойдет для вашей ситуации... но вы также можете использовать этот плагин, который будет обнаруживать новые файлы и передавать их:

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