Command смотреть и перевяжите с помощью 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-shell,

тогда задача Глоток будет

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

Answer 3

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

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

пример с использованием многих меньше файлов и сравнить с одной concaten ованные 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')); 
});