Жива перезавантаження — це техніка у веб-розробці, яка дозволяє розробнику бачити результат свого коду без оновлення браузера.
У традиційному процесі ви повинні натиснути F5 або кнопку Оновити у своєму браузер, щоб попросити його оновити внесені зміни. Це змушує вас по черзі перемикатися між редактором та браузером. Один раз, два, три рази та більше. Ви можете помітити, що ця звичка може виявитися дуже стомлюючою та трудомісткою.
Мета живого навантаження — уникнути ручної роботи. Щоразу, коли ви натискаєте Ctrl + S або зберігаєтеся, ваш браузер перезавантажуватиметься самостійно. Круто!
Існує програма під назвою liveReload, яку ви могли б використовувати в поєднанні з плагіном Google Chrome, щоб забезпечити живе перезавантаження. Я спробував змусити його працювати як на Linux, так і на Windows, але не міг. Тому, будь ласка, вибачте мені. Одне безперечно, сьогодні цей плагін є з Gulp (gulp-livereload) і ви можете його випробувати.
Я не єдиний, у кого не все добре з liveReload. Більшість людей, безсумнівно, стикалися з багатьма труднощами, намагаючись використати його, тому вони створили йому повну заміну: gulp-browserSync.
Жива перезавантаження з gulp-browserSync
BrowserSync є ймовірно одним із найкорисніших плагінів, який хотілося б мати розробнику. Він насправді дає можливість запустити сервер, на якому ви можете виконувати свої програми. Він дбає про перезавантаження ваших HTML/PHP-файлів. У нього також є можливість оновити/впровадити CSS та JavaScript-файли в HTML та багато іншого. За допомогою цього плагіна ви йдете виключно вперед.
Тепер подивимося, як це працює. Перейдіть до папки проекту та встановіть плагін browser-sync так:
<code>npm install--save-dev browser-sync
Увімкніть його до файлу gulpfile.js :
<code data-language="javascript">var browserSync=require('browser-sync');Функція перезавантаження BrowserSync називається reload(). Давайте викликаємо її і збережемо в змінній, просто для зрозумілості.
<code data-language="javascript">var reload=browserSync.reload;
Зверніть увагу що там, де я використовую reload() ви також можете використовувати browserSync.reload().
Введіть змінну paths на зразок цього:
<code data-language="javascript">var paths={ html:['index.html'], css :['main.scss'], script:['script.coffee'] };Ці файли ми відслідковуємо на будь-які зміни.
Ми створили завдання для файлів Sass і JavaScript, тепер давайте додамо одну для HTML-файлів.
<code data-language="javascript">gulp.task('html', function(){) .pipe(reload({stream:true})); });Все що робить це завдання — пропускає наш HTML-файл через функцію reload () з browser-sync. Якщо ви, наприклад, використовуєте jade, то могли б компілювати його до перезавантаження.
Робимо те саме з нашими існуючими завданнями:
<code data-language="javascript">//CSS gulp.task('mincss', function(){ return gulp.src(paths.css) .pipe(sass().on('error', sass.logError)) .pipe(minifyCss()) .pipe (gulp.dest('main')) .pipe(reload({stream:true})); }); //JavaScript gulp.task('scripts', function(){ return gulp.src(paths.script) .pipe(coffee()) .pipe(gulp.dest('js')) .pipe(reload({stream) :true}));});browser-sync потрібно знати розташування файлів, які ми перезавантажуємо/синхронізуємо і запустити міні-сервер заснований на цьому; порт для прослуховування; проксі, якщо можливо та ін. Подивіться всі варіанти тут.
Давайте налаштуємо browser-sync і надамо йому всю інформацію.
<code data-language="javascript">gulp.task('browserSync', function() { browserSync({ server: { baseDir: "./" }, port: 8080, open: true, notify: false }); p>
<p>Тепер додайте це завдання до завдання watcher:</p> <pre><code data-language="javascript">gulp.watch(paths.html, ['html']);І, нарешті, підретушуємо завдання default:
<code data-language="javascript">gulp.task('default', ['watcher', 'browserSync']); Файл gulpfile.js повинен виглядати таким чином:
<code data-language="javascript">var gulp=require('gulp'); var minifyCss=require('gulp-minify-css'); var coffee=require('gulp-coffee'); var sass=require('gulp-sass'); var notify=require('gulp-notify'); var browserSync=require('browser-sync'); var reload=browserSync.reload; var paths={ html:['index.html'], css:['main.scss'], script:['script.coffee'] }; gulp.task('mincss', function(){ return gulp.src(paths.css) .pipe(sass().on('error', sass.logError)) .pipe(minifyCss()) .pipe(gulp .dest('main')) .pipe(reload({stream:true})); }); ///////////////////////////////////////////////////HTML ////////////////////////////////////////////////gulp.task('html', function(){ gulp.src(paths.html) .pipe(reload({stream:true})); }); ///////////////////////////////////////////////////Browser-Sync ////////////////////////////////////////////////gulp.task('browserSync', function() { browserSync({ server: { baseDir: "./" }, port: 8080, open: true, notify: false }); }); gulp.task('scripts', function(){ return gulp.src(paths.script) .pipe(coffee()) .pipe(gulp.dest('js')) .pipe(reload({stream:true})));}); gulp.task('watcher',function(){ gulp.watch(paths.css, ['mincss']); gulp.watch(paths.script, ['scripts']); gulp.watch(paths.html, ['html']);}); gulp.task('default', ['watcher', 'browserSync']);Після цього перейдіть до папки проекту, якщо ви ще не там, і запустіть gulp. Зробіть кілька змін у HTML або Sass-файлі та спостерігайте магію Gulp! Якщо все піде добре, у консолі у вас має бути щось подібне.
Browser-sync та PHP-файли
Змініть файл index.html на index.php і підправте шляхи так:
<code data-language="javascript">var paths={ html:['index.php'], css:['main.scss'], script:['script.coffee'] }; <Це передбачає, що ви хочете працювати з PHP, а не тільки з HTML. Перейдіть до командного рядка, зупиніть поточний процес через Ctrl + C, а потім запустіть gulp знову.Gulp виконає вашу програму на http://localhost :8080, але ви побачите тільки це на сторінці:
<code>Cannot GET /
Пам'ятайте, перед виконанням будь-яких інструкцій PHP вам потрібен сервер PHP. Тому через цю помилку Gulp намагається сказати нам, що жодного PHP-сервера не знайдено.
Все, що нам потрібно зараз зробити — це запустити сервер PHP разом із нашими завданнями. Для цього ми використовуємо плагін gulp-connect-php.
Запуск PHP-сервера на вимогу з browserSync
Перш за все, почнемо з установки плагіна gulp-connect-php, який нам допоможе.
<code>npm install--save-dev gulp-connect-php
Тепер увімкнемо його в gulpfile.js:
<code data-language="javascript">var connectPHP=require('gulp-connect-php');Додамо завдання php:
<code data-language="javascript">gulp.task('php', function(){ connectPHP.server({ base: './', keepalive:true, hostname: 'localhost', port:8080, open: false}); }) ;Докладніше про налаштування gulp-connect-php читайте тут. Оскільки ми можемо встановити port, baseDir та інші параметри з налаштувань PHP-сервера, ми можемо модифікувати наше завдання browserSync і зробити його легшим :
<code data-language="javascript">gulp.task('browserSync', function() { browserSync({ proxy:'127.0.0.1', port:8080 }); }); Зверніть увагу: я створив сервер не з browserSync, а з PHP. Швидше створив проксі для browserSync.
Остаточний файл повинен виглядати так:
<code data-language="javascript">var gulp=require('gulp'); var minifyCss=require('gulp-minify-css'); var coffee=require('gulp-coffee'); var sass=require('gulp-sass'); var notify=require('gulp-notify'); var browserSync=require('browser-sync'); var reload=browserSync.reload; var connectPHP=require('gulp-connect-php'); ///////////////////////////////////////////////////Шляхи до вихідних файлів //вони трохи змінилися ///////////////////////////////////////////////var paths={ html:['./*.php'], css:['./*.scss'], script:['./*.coffee'] }
; gulp.task('mincss', function(){ return gulp.src(paths.css) .pipe(sass().on('error', sass.logError)) .pipe(minifyCss()) .pipe(gulp .dest('main')) .pipe(reload({stream:true})); }); ///////////////////////////////////////////////////HTML ////////////////////////////////////////////////gulp.task('html', function(){ gulp.src(paths.html) .pipe(reload({stream:true})); }); ///////////////////////////////////////////////////Browser-Sync ////////////////////////////////////////////////gulp.task('browserSync', function() { browserSync({ proxy:'127.0.0.1', port:8080 }); }); /////////////////////////////////////////////////////PHP ////////////////////////////////////////////////gulp.task('php', function(){ connectPHP.server({ base: './', keepalive:true, hostname: 'localhost', port:8080, open: false}); }) ; gulp.task('scripts', function(){ return gulp.src(paths.script) .pipe(coffee()) .pipe(gulp.dest('js')) .pipe(reload({stream:true})));}); gulp.task('watcher',function(){ gulp.watch(paths.css, ['mincss']); gulp.watch(paths.script, ['scripts']); gulp.watch(paths.html, ['html']);}); gulp.task('default', ['watcher', 'browserSync', 'php']);Спробуйте це.
Резюме
Жива перезавантаження — це цікава функція, з якою ви дійсно можете насолоджуватися Gulp. Як і раніше, є кілька способів написання завдань і особливо, коли поєднується browserSync та gulp-connect-php. Я запрошую вас переглянути відповідні сайти заради нових ідей.