Учебники

Gulp — Live Обновить

Январь 4, 2019

Live Reload указывает изменения в файловой системе. BrowserSync используется для просмотра всех файлов HTML и CSS в каталоге CSS и выполнения перезагрузки в реальном времени на страницу во всех браузерах при каждом изменении файлов. BrowserSync ускоряет рабочий процесс за счет синхронизации URL-адресов, взаимодействий и изменений кода на нескольких устройствах.

Установка плагина BrowserSync

Плагин BrowserSync обеспечивает межбраузерное внедрение CSS и может быть установлен с помощью следующей команды. 

npm install browser-sync --save-dev

Настройка браузера BrowserSync

Чтобы использовать плагин BrowserSync, вам нужно записать зависимости в файл конфигурации, как показано в следующей команде. 

var browserSync = require('browser-sync').create();

Вам необходимо создать задачу для BrowserSync для работы с сервером с помощью Gulp. Поскольку вы работаете с сервером, вам нужно сообщить BrowserSync о корне вашего сервера. Здесь мы используем базовый каталог как «build». 

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

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

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

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

Когда вы закончите настройку, запустите BrowserSync и watchTask для появления эффекта перезагрузки в реальном времени. Вместо того, чтобы запускать две командные строки отдельно, мы запустим их вместе, добавив browserSynctask вместе с watchTask, как показано в следующем коде. 

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

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

gulp

После запуска задачи с помощью приведенной выше команды вы получите следующий результат в командной строке. 

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

Откроется окно браузера с URL-адресом http: // localhost: 3000 / . Любые изменения, внесенные в файл CSS, будут отражены в командной строке, и браузер автоматически перезагрузится с измененными стилями.

43
Share: