CSS在Node.js上没有更新？

Question

试图通过Node.js上的Gulp使用浏览器同步在浏览器上更新css ...我做错了什么？

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

我已经使用“本地服务器”链接以查看浏览器的网站项目和proxying :http://localhost（做我添加/ WordPress的路径？）

Node.js的终端屏幕：https://imgur.com/a/9lUNi

不知道为什么CSS没有更新，浏览器同步迹象显示在b罗斯和似乎是同步（测试多个浏览器），CSS不更新？！

Answer 1

你需要管browserSync你 'CSS' 任务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 })); 
}); 

你

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

可能会碰到很多比赛条件（例如在'css'任务完成并运行多次之前运行），我将它移除并将重载管道放在'javascript'和'图像'任务的末尾，作为w埃尔。