Gulp inject CSS in Wordpress

Question

I try to integrate Live CSS Injection into my Wordpress Project with GULP. Here is my current set up:

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']);
});

In the Terminal I get following message:

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

And in the Browser-Console it says:

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

Has anyone an idea, what I got wrong? The sass file is correctly rendered, so when I reload the page manualy the changes take affect.

Thanks a lot!! :)

browser: "Google Chrome" should be "google chrome" in small letters according to the docs. — Mark
– Mark, Commented Jan 3, 2018 at 21:43

onedrop · Accepted Answer · 2018-01-03 22:13:57Z

I found the solution:

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']);

The Terminal Message looks like this now:

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

And the google chrome console says this:

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

Hope it helps someone out there :) Thank you! Cheers

Collectives™ on Stack Overflow

Gulp inject CSS in Wordpress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related