Question

我尝试使用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文件已正确呈现，因此当我手动重新加载页面时，更改会生效。

非常感谢!! ：）

Answer 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

谷歌Chrome控制台说：

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

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

Gulp在Wordpress中注入CSS

1 个答案: