2017-01-10 12 views
0

Я начал работать с расширением хром. Пока я настраиваю проект, используя gulp, чтобы посмотреть папку, содержащую код для фона, всплывающего окна, содержимого и нескольких других страниц. Каждый компонент имеет некоторый код с другими.Настройка проверки и браузера для повторного запуска только необходимых файлов

Проблема в том, что каждый раз, когда я редактирую файл наблюдения, вы запускаете полную перестройку.

Я попытался ограничить процесс браузера только обработкой файлов, которые были изменены. Он отлично работает для корневых скриптов (popup.js, background.js, content.js) ... Но, к сожалению, у меня нет способа отслеживания зависимостей (файлов, требуемых корневыми сценариями или их зависимостями), и эта стратегия терпит неудачу, когда зависимость отредактирована.

Итак, вот мой вопрос: есть ли хорошая стратегия автоматического обновления любого зависимого скрипта при изменении, избегая полного браузера всего дерева?

gulp.task('babel',() => { 
    buildingTasks.start('babel'); 
    return gulp.src(scriptSrc) 
    .pipe(through2.obj(function (file, enc, next){ 
    var b = browserify(file.path, { 
     debug: (process.env.NODE_ENV === 'development') 
    }); 
    b.transform(babelify, {presets: ['es2015', 'react']}); 
    b.bundle(function(err, res){ 
     if (err) return next(err); 
     file.contents = res; 
     next(null, file); 
    }); 
    })) 
    .pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(sourcemaps.write('map')) 
    .pipe(gulp.dest(scriptDest)) 
}); 

Я нашел this answer для доступа к списку зависимостей, но это потребует построения дерева зависимостей вручную, хранить его где-то и обновлять его каждый раз, когда сборка срабатывает. Есть ли лучшее решение?

ответ

1

Для Browserify смотреть пакетные файлы, вам нужно настроить Watchify:

var browserify = require('browserify'); 
var watchify = require('watchify'); 

... 

var options = Object.assign({}, watchify.args, { 
    debug: (process.env.NODE_ENV === 'development') 
}); 
var b = watchify(browserify(file.path, options)); 

В watchify методы завернуть пакетирование Browserify и предоставляют некоторые общие аргументы через options, которые используются для определения того, какие файлы необходимо наблюдать , Он возвращает тот же набор, который был бы возвращен browserify.

+1

Наконец я пошел по этой дороге и остановился с помощью gulp.watch для браузера. – Coyote