глоток 4 не обновляет CSS и JS - PullRequest
Новая
       21

глоток 4 не обновляет CSS и JS

0 голосов
/ 14 марта 2019

Я занимаюсь разработкой своих собственных тем для WordPress, я узнал о Glup и о том, как легко он сделал мой рабочий процесс, проблема, с которой я сталкиваюсь с помощью приведенного ниже кода, заключается в том, что я могу видеть немедленные изменения, вносимые в основнойстраницы (html или php), но любые изменения, которые я делаю в файлах css или файлах java-скриптов, вообще не выполняются, но мне нужно обновить страницу вручную: 

var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');

gulp.task('styles', function() {
  return gulp.src(settings.themeLocation + 'css/style.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
    .on('error', (error) => console.log(error.toString()))
    .pipe(gulp.dest(settings.themeLocation));
});

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

gulp.task('watch', function() {
  browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
    ghostMode: false
  });

  gulp.watch('./**/*.php', function(done) {
    browserSync.reload();
    done();
  });

  gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
  gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});

gulp.task('waitForStyles', gulp.series('styles', function() {
  return gulp.src(settings.themeLocation + 'style.css')
    .pipe(browserSync.stream());
}))

gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
  browserSync.reload();
  cb()
}))

1 Ответ

1 голос
/ 14 марта 2019

Попробуйте это: 

gulp.task('styles', function() {
  return gulp.src(settings.themeLocation + 'css/style.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
    .on('error', (error) => console.log(error.toString()))
    .pipe(gulp.dest(settings.themeLocation))

     // added below
    .pipe(browserSync.stream());
});

// now this task is unnecessary:
// gulp.task('waitForStyles', gulp.series('styles', function() {
//  return gulp.src(settings.themeLocation + 'style.css')
//    .pipe(browserSync.stream());
// }))


 // cb added, called below       
gulp.task('watch', function(cb) {
  browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
    ghostMode: false
  });

  gulp.watch('./**/*.php', function(done) {
    browserSync.reload();
    done();
  });

      // change to gulp.series below 
  // gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('waitForStyles'));

   // changed to 'styles' below        
 gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles'));

  gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts'));

  cb();
});

Я видел, что у gulp4 возникли проблемы только с одной задачей, например, gulp.parallel('oneTaskHere'), поэтому попробуйте поменять parallel на series в своих операторах наблюдения, как показано выше.

Я внес некоторые изменения, чтобы упростить код - попробуйте. Нет необходимости в 'waitForStyles', просто переместите трубу browserSync.stream() в конец задачи styles.

Или вместо перемещения канала browserSync.stream просто сделайте это: 

gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles', browserSync.reload));

но мне, кажется, повезло больше с конвейером browserSync в конце версии задачи 'styles'.

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

gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts', browserSync.reload));

и тогда нет необходимости в 'waitForScripts' задании.

...