CSS 没有在 Node.js 上更新？答案

【问题标题】：CSS not updating on Node.js?CSS 没有在 Node.js 上更新？
【发布时间】：2018-03-19 03:20:00
【问题描述】：

试图通过 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没有更新，浏览器同步标志显示在浏览器上并且似乎是同步的（用多个浏览器测试），css没有更新？！

【问题讨论】：

标签： html node.js wordpress npm gulp

【解决方案1】：

您需要在“css”任务 ala 结束时通过管道传输到 browserSync：

// 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);

可能会遇到很多race 条件（例如在'css'任务完成之前运行并多次运行），我会删除它并将在“javascript”和“images”任务结束时重新加载管道。

【讨论】：

好的，复制了确切的代码，没有用。对此的新手，所以我不知道我在做什么......有没有办法在没有 sass css 的情况下完成这项工作，也许它会更容易。同样在：gulp.task('css', function()...我应该将名称'css'更改为我的样式表还是没关系？谢谢1
当您修改 scss 或 css 文件时，您是否得到任何修改后的 css 输出？看看新的 css 文件——它有你的变化吗？那个css文件是你在你的html中链接到的那个吗？将其保留为 gulp.task('css'... 这是您在 watch css/scss 调用中链接到的名称。
好的，我已经更改了我的问题以提供更好的上下文：stackoverflow.com/questions/46627119/…
我看到了你的另一个问题。除了我的 cmets 关于上述竞争条件之外，你的代码一般都很好。所以这通常意味着您的 src 不正确。您使用 return gulp.src(scss + '{style.scss,rtl.scss}') ：您正在编辑的 css 是否位于该 src 中？如果没有，你应该把它的相对路径（从 gulpfile.js 放到 gulp.src('relativePathtoMyCSS')
所以我应该把我的相对css路径放在那里？问题是这样的...... gulp.js 文件位于 ../wordpress/wp-content/themes/gulp-dev 的 gulp-dev 文件夹中，而 css 文件位于 ./wordpress/wp-content/themes/ newT/style.css

【解决方案2】：

我刚刚度过了非常令人沮丧的几天，与拒绝更新的 css 作斗争，最后通过在 Chrome 开发者工具的网络选项卡中禁用缓存来解决它。像魅力一样工作。我知道这是一个老问题，但我想我会在这里为将来发现自己处于相同位置的人添加建议。

【讨论】：