Страница не загружается / автоинъекция с Gulp 4 и Browsersync - PullRequest
Новая
       75

Страница не загружается / автоинъекция с Gulp 4 и Browsersync

0 голосов
/ 19 мая 2019

Попытка создать шаблон для создания нового PWA с использованием Gulp 4 с Browsersync для автоматизации задач, автоматической перезагрузки и автоматического ввода изменений.Файлы папок Dist обновляются при внесении изменений.Перезагрузка работает только с HTML.CSS не вводит автоматически и HTML не перезагружается после изменения CSS и HTML.https://gist.github.com/flaura42/a22823d97baf889160b2b18ca85dbfb4

Я прочитал кучу других SO вопросов и попробовал разные способы сделать это, но пока ничего не работает.Гист закомментировал код, чтобы показать некоторые методы, которые я пробовал.Я удалил Gulp перед установкой Gulp 4. 

import babel from 'gulp-babel';
import browserSync from 'browser-sync';
import del from 'del';
const server = browserSync.create();

// Process and minify css, copy to dist folder
export function styles() {
  return gulp.src(paths.styles.src)
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(server.reload({stream: true}));
}

// Copy html to dist folder
export function html() {
  return gulp.src(paths.html.src)
    .pipe(gulp.dest(paths.html.dest));
}

// Watch files for changes and reload server
export function watch() {
  gulp.watch(paths.styles.src, styles);
  gulp.watch(paths.html.src, html).on('change', server.reload);
}

// Start serving src folder
export function serve(done) {
  server.init({
    server: {
      baseDir: './src'
    }
  });
  done();
}

// Build dist folder, start server, and watch files
const build = gulp.series(clean, gulp.parallel(styles, html), serve, watch);

// Make build be default task
export default build;

Я ожидал, что страница будет перезагружена / автоматически введена после внесения изменений.Выход терминала указывает, что это происходит, но никаких изменений не отображается: 

[13:35:57] Starting 'styles'...
[Browsersync] 1 file changed (app.css)
[13:35:57] Finished 'styles' after 8.05 ms
[13:36:03] Starting 'html'...
[13:36:03] Finished 'html' after 6.04 ms
[Browsersync] Reloading Browsers...

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

Я решил проблему и обновил суть. Возникла проблема с моей функцией наблюдения, и, по-видимому, необходимо выполнить перезагрузку в отдельной функции. 

function reload(done) {
  server.reload();
  done();
}

// Watch files for changes and reload server
export function watch() {
  gulp.watch(paths.styles.src, gulp.series(styles, reload));
  gulp.watch(paths.html.src, gulp.series(html, reload));
}

Суть: https://gist.github.com/flaura42/a22823d97baf889160b2b18ca85dbfb4

Выяснил проблему после того, как еще раз взглянул на этот рецепт: https://github.com/gulpjs/gulp/blob/master/docs/recipes/minimal-browsersync-setup-with-gulp4.md

0 голосов
/ 22 мая 2019

Ваш server.baseDir должен быть вашим каталогом dist: 

export function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}

Я создал упрощенную версию в этой сути .

...