Gulp 在 Wordpress 中注入 CSS答案

【问题标题】：Gulp inject CSS in WordpressGulp 在 Wordpress 中注入 CSS
【发布时间】：2018-06-13 14:16:42
【问题描述】：

我尝试使用 GULP 将 Live CSS Injection 集成到我的 Wordpress 项目中。这是我目前的设置：

gulpfile.js：

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

// Init Browser-Sync
gulp.task('browser-sync', function() {

    browserSync.init({
      proxy: "http://localhost:8888/buergerrat.at/",
      notify: true,
      injectChanges: true,
      browser: "Google Chrome"
    });
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("*.scss") // Gets all files ending with .scss
        .pipe(sass())
        .pipe(gulp.dest("./"))
        .pipe(browserSync.reload({ stream: true }))
});

/* Watch Files */
gulp.task('default', ['sass', 'browser-sync'], function (){
  gulp.watch('*.scss', ['sass']);
});

在终端中我收到以下消息：

[22:13:14] Starting 'sass'...
[Browsersync] 1 file changed (style.css)
[22:13:14] Finished 'sass' after 8 ms

在浏览器控制台中显示：

22:12:59 ✨ Browsersync reloading stylesheet: http://localhost:3000/buergerrat.at/wp-content/themes/wordpressTheme/style.css?ver=5.0-alpha-42425&browsersync=1515013964239

有谁知道我做错了什么？ sass 文件已正确呈现，因此当我手动重新加载页面时，更改会生效。

非常感谢！！ :)

【问题讨论】：

浏览器：根据文档，“Google Chrome”应该是小写字母的“google chrome”。

标签： wordpress gulp inject browser-sync livereload

【解决方案1】：

我找到了解决办法：

Guplfile.js：

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

// Init Browser-Sync
gulp.task('browser-sync', function() {

    browserSync.init({
      proxy: "http://localhost:8888/buergerrat.at/",
      notify: true,
      injectChanges: true,
      browser: "google chrome"
    });

    // Inject CSS without page-reload
    browserSync.watch("*.css", function (event, file) {
        if (event === "change") {
            browserSync.reload("*.css");
        }
    });

    // reload entire page on file changes
    gulp.watch('*.php').on('change', browserSync.reload);

});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    gulp.watch('*.scss', ['sass']);

    return gulp.src("*.scss")     // Gets all files ending with .scss
        .pipe(sass())
        .pipe(gulp.dest("./"))    // save into same folder as gulpfile.js
});

/* Watch Files */
gulp.task('default', ['sass', 'browser-sync']);

终端消息现在看起来像这样：

[23:10:38] Starting 'sass'...
[23:10:38] Finished 'sass' after 13 ms
[Browsersync] Reloading files that match: *.css

谷歌浏览器控制台这样说：

23:10:41 ✨ Browsersync reloading all stylesheets because path '*.css' did not match any specific one

希望它可以帮助那里的人:) 谢谢！干杯

【讨论】：