Question

我使用GulpJS作为构建工具来将我的样式连接并缩小为1个脚本。我正在观看我的css文件以进行更改，然后在使用浏览器同步重新加载页面之前在css gulp任务中执行必要的性能操作。由于某种原因，浏览器重新加载并且未应用css更改。如果我尝试将background: red放在body上进行测试，则不会发生任何更改。如果我然后进入新的styles.css文件，我看到css任务完成组合文件（包括更改）并将其推送到1个统一文件的工作，但该文件未被使用。经过几个小时的研究，我认为它可能与Chrome缓存旧的CSS文件有关？这是我gulpfile.js的相关部分：

// css task 
gulp.task('css:dev', function() {
    return gulp.src('app/assets/css/src/*.css')
        .pipe(plumber())
        .pipe(sourcemaps.init())
            .pipe(concat('styles.css'))
            .pipe(prefix({
                browsers: ['last 2 versions']
            }))
            .pipe(cssNano())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('app/assets/css'))
        .pipe(browserSync.reload({stream:true}))
});


// watch for file and changes and reload browser
gulp.task('watch', function() {
    gulp.watch('app/assets/css/src/*.css', ['css:dev']);
});

我在css:dev任务运行时也注意到终端中的输出：

GET /assets/css/styles.css?v=2388785908 200 21.388 ms - -

styles.css?=#############似乎是旧版本？我有点失落。任何帮助将不胜感激！

将GulpJS与浏览器同步一起使用时，CSS文件不会更新

0 个答案: