Gulpfile 更改 css 但未保存

Question

我正在尝试创建一个适用于 scss 和 php 的 gulpfile。

一切顺利，但我通过将 h1 从红色更改为黄色来测试它。 Browsersync 启动了。H1 现在是黄色的。将其更改为绿色。它变成了绿色。耶！有用。

但是当我更改 php 文件时，所有 css 更改都消失了。即使当我删除我的 style.css 文件时，它也能 100% 工作。它就像缓存 css 一样？！我不知道在哪里寻找解决方案。

谁能帮帮我？

这是我的 gulpfile:

var gulp = require('gulp'),
connect = require('gulp-connect-php'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
cache = require('gulp-cache');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function () {
connect.server({}, function () {
    browserSync({
        proxy: 'raak.test'
    });
  });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('images', function () {
  gulp.src('src/img/*')
    .pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
    .pipe(gulp.dest('assets/img/'));
});

gulp.task('styles', function () {
    var processors = [
       autoprefixer,
       cssnano
];

gulp.src(['src/css/style.scss'])
    .pipe(plumber({
        errorHandler: function (error) {
            console.log(error.message);
            this.emit('end');
        }
    }))
    .pipe(sass())
    .pipe(postcss(processors))
    .pipe(gulp.dest('assets/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.stream())
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch("**/*.scss", ['styles']);
    gulp.watch("**/*.php", ['bs-reload']);
});

Answer 1

Its like it caches the css

你调查过这个吗？我会发表评论，但我该死的观点很烂。如果您在 chrome 中进入开发工具（右键单击 'inspect'），您可以通过按住刷新并单击最后一个选项来进行硬重新加载。这将清除缓存的任何机会。此外，如果您有 service worker 或正在使用 indexeddb，则可能会发生这种情况。通常每个人都在隐身模式下开发，以便在第一时间避免这种情况发生！希望这有帮助 :D

Gulpfile 更改 css 但未保存

Gulpfile changes css but doesnt save it

php

gulp

browser-sync

postcss