Просматривать становится все более и более жизнеспособным решением для разработки скриптов JS и предлагая синтаксис по образцу Node.js. Скомпилируйте скрипты с Просматривать Просто. В ходе разработки использовалось Смотреть позволяет компилировать файлы на лету. Несмотря на это, если вы хотите интегрировать свою компиляцию с другими задачами Глоток (например, компиляция файлов Меньше), вы сталкиваетесь с проблемой: как использовать наблюдать в то же время глоток смотреть. Ответ в этой статье!

резюме

Использование Gulp и Browserify — уровень 0

Name: Agence Web Tremplin Numérique
Price range: $$$

Utiliser Глоток et Просматривать довольно просто. Вы можете использовать Browserify API или пойти проще и использовать gulp-browserify, что позволит вам легко компилировать ваши файлы.

Const глоток = требовать('глоток');
Const обозревать = требовать('проглотить-обозревать');
глоток.задача('js', функция() {
глоток.src('источник/*.js', { читать: ложный })
.pipe(просмотреть())
.pipe(gulp.dest('./строить/'))
});

Проблема, с которой вы быстро столкнетесь, заключается в том, что для работы с вашими файлами и их повторной компиляции на лету вам придется анализировать все файлы. Это очень дорого. Просматривать придется загрузить все ваши файлы, а также все зависимости, которые вы используете. Чем больше становится ваш проект, тем быстрее бежит время. Кроме того, если вы используете прообразы Comme Бабелайф раз набухнет еще быстрее (Список всех плагинов, доступных через Babel). Также список всех Просмотр преобразований.

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

глоток.задача("смотреть", функция () {
глоток.смотреть(«./src/*.js»[«ДжС»]).мы("изменять", функция(мероприятие) {
консоль.бревно(`Файл ${событие.путь} было ${событие.тип}`);
});
});

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

Смотреть

Смотреть позволяет эффективно компилировать ваши файлы с помощью Просматривать. Он сохранит в памяти результат компиляции каждого файла (все файлы, связанные с вашим файлом, такие как зависимости…).

Когда файл обновляется, он обновляет отпечаток только что измененного файла и генерирует пакет без разбора всех ваших зависимостей.

Используйте Gulp, Browserify и Watchify — Уровень ∞

Установка зависимостей Node.js

Вы можете установить их с помощью Yarn (если вы действительно в курсе 🙂)!

1	$ пряжа добавить браузер глоток винил-буфер винил-исходный поток смотреть -dev

В противном случае вы используете старый добрый NPM 🙉

1	$ npm install browserify gulp винил-буфер винил-исходный поток watchify –save-dev

gulpfile.js

"строгое использование";
Const обозревать = требовать(«просматривать»),
буфер = требовать("виниловый буфер"),
глоток = требовать("глоток"),
путь = требовать("путь"),
источник = требовать("винил-источник-поток"),
пользователь = требовать(«глоток-утилита»),
смотреть= требовать(«наблюдай»),
источник = {
js: «./src/main.js»
},
пункт назначения = {
js: "./строить/"
};
позволять упаковщик;
функция пучки(профиль) {
if (комплект === undefiопределена) {
if (профиль === "смотреть") {
bundler = watchify (browserify (src.js));
} еще {
комплект = обозреватель (src.js);
}
}
пучок();
}
функция пакет() {
позволять начало = new Время().получить время(),
_ = упаковщик
.пучок()
.на("Ошибка", util.log.bind(util, «Ошибка браузера»))
.pipe(источник(«main.js»))
.pipe(буфер())
.pipe(gulp.dest(dest.js)),
время = new Время().getTime() – старт;
утилита.лог("[browserify] произошла повторная сборка" , использовать.colors.cyan(`${время} мс`), util.colors.grey(`(${src.js})`));
возвращение _;
}
глоток.задача(«ДжС», связки.bind(нуль));
глоток.задача("смотреть", функция () {
связки("смотреть");
упаковщик.на("Обновлять", расслоение.связать(нуль));
});
глоток.задача("по умолчанию"["смотреть", «ДжС»])?

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

Чтобы упростить вам задачу, я предоставляю вам архив с гуплфайл.js более полный, который обрабатывает компиляцию файлов JavaScript с Галдеж (и немного пресеты как ES2015), но и файлы Меньше при управлении профилями, такими как развитие с или без смотреть но и производство с минификацией!

Заключение

Вполне можно использовать Просматривать эффективно с Глоток при условии, что вы играете с API (Программный интерфейс приложения). Это заставляет вас немного свернуть с проторенной дорожки и обойтись без плагинов. Глоток которые мы обычно используем.