CSS ne se met pas à jour sur Node.js?

Question

Essayer d'obtenir le CSS pour mettre à jour sur le navigateur en utilisant la synchronisation du navigateur via Gulp sur Node.js ... Qu'est-ce que je fais mal?

Ceci est le fichier Gulp.js

var themename = 'playtest haha 1'; 

var gulp = require('gulp'), 
    // Prepare and optimize code etc 
    autoprefixer = require('autoprefixer'), 
    browserSync = require('browser-sync').create(), 
    image = require('gulp-image'), 
    jshint = require('gulp-jshint'), 
    postcss = require('gulp-postcss'), 
    sass = require('gulp-sass'), 
    sourcemaps = require('gulp-sourcemaps'), 

    // Only work with new or updated files 
    newer = require('gulp-newer'), 

    // Name of working theme folder 
    root = '../' + themename + '/', 
    scss = root + 'sass/', 
    js = root + 'js/', 
    img = root + 'images/', 
    languages = root + 'languages/'; 


// CSS via Sass and Autoprefixer 
gulp.task('css', function() { 
    return gulp.src(scss + '{style.scss,rtl.scss}') 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ 
     outputStyle: 'expanded', 
     indentType: 'tab', 
     indentWidth: '1' 
    }).on('error', sass.logError)) 
    .pipe(postcss([ 
     autoprefixer('last 2 versions', '> 1%') 
    ])) 
    .pipe(sourcemaps.write(scss + 'maps')) 
    .pipe(gulp.dest(root)); 
}); 

// Optimize images through gulp-image 
gulp.task('images', function() { 
    return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}') 
    .pipe(newer(img)) 
    .pipe(image()) 
    .pipe(gulp.dest(img)); 
}); 

// JavaScript 
gulp.task('javascript', function() { 
    return gulp.src([js + '*.js']) 
    .pipe(jshint()) 
    .pipe(jshint.reporter('default')) 
    .pipe(gulp.dest(js)); 
}); 


// Watch everything 
gulp.task('watch', function() { 
    browserSync.init({ 
     open: 'external', 
     proxy: 'http://localhost/wordpress', /* add your local host so the task can since the browser thing a bob*/ 
     port: 8080 
    }); 
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']); 
    gulp.watch(js + '**/*.js', ['javascript']); 
    gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']); 
    gulp.watch(root + '**/*').on('change', browserSync.reload); 
}); 


// Default task (runs at initiation: gulp --verbose) 
gulp.task('default', ['watch']); 

J'utilisant le « serveur local » lien pour voir le projet de site Web sur le navigateur et le proxying :http://localhost (dois-je ajouter le chemin/wordpress?)

Node.js écran du terminal: https://imgur.com/a/9lUNi

Je ne sais pas pourquoi le css est pas mise à jour, le signe de synchronisation du navigateur est affiché sur le b rowsers et semblent être synchronisés (testé avec plusieurs navigateurs), le css ne se met pas à jour?!

Answer 1

Vous devez tuyau pour browserSync à la fin de votre 'NCS' tâche ala:

// CSS via Sass and Autoprefixer 
gulp.task('css', function() { 
    return gulp.src(scss + '{style.scss,rtl.scss}') 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ 
     outputStyle: 'expanded', 
     indentType: 'tab', 
     indentWidth: '1' 
    }).on('error', sass.logError)) 
    .pipe(postcss([ 
    autoprefixer('last 2 versions', '> 1%') 
    ])) 
    .pipe(sourcemaps.write(scss + 'maps'))  
    .pipe(gulp.dest(root)) 
    .pipe(browserSync.reload({ stream:true })); 
}); 

Votre

gulp.watch(root + '**/*').on('change', browserSync.reload); 

probablement courir dans beaucoup de courseconditions (comme par exemple en cours d'exécution avant que la tâche 'css' ne se termine et ne s'exécute plusieurs fois) et je voudrais le supprimer et mettre le tuyau de rechargement à la fin de vos tâches 'javascript' et 'images' comme w aune.