Question

我使用以下gulp设置将我的sass文档编译为一个缩小的css文档，在我的IDE（Atom）中保存任何文档时缩小我的j并重新启动浏览器。

Public Class Form1
    Private Sub btnCalculate_Click(sender As Object, e As EventArgs) Handles btnCalculate.Click
        Dim intScore As Integer
        Dim intTotal As Integer
        Dim intCounter As Integer
        Dim intAverage As Integer

        For intCounter = 1 To 5
            intScore = InputBox("Enter your grade to continue:", "What's your Grade?")
            If intScore < 1 Or intScore > 100 Then

                MessageBox.Show("Please Enter a number between 1 and 100")

            End If

            intTotal = intScore + intTotal
            intAverage = intTotal / 5
            lblAnswers.Text = ("Your Grade is: " & intScore) + vbNewLine + ("Your Grade is: " & intScore) + vbNewLine + ("Your Grade is: " & intScore) + vbNewLine + ("Your Grade is: " & intScore) + vbNewLine + ("Your Grade is: " & intScore) + vbNewLine + ("Your Average is: " & intAverage)
        Next

    End Sub
End Class

当我编辑我的一个sass文件时，我的Chrome浏览器会自动刷新我的localhost（MAMP）页面。但是，当我在IDE中保存我的index.html页面或在浏览器中刷新页面时，Chrome会使用我编译的css文件的旧版本，但不会显示当前的更改。

为什么？我该如何解决这个问题？

Answer 1

如果此处的问题实际上与我的相同，即竞争条件，则以下内容将有所帮助：

...
/* ===== STYLE TASKS ===== */
//compiling and compressing scss files
gulp.task('styles', function () {
  return sass('scss/**/*.scss', { style: 'compressed' })
    .on('error', sass.logError)
    .pipe(gulp.dest('css'))
    .on('end', function() {
        livereload.reload()
    });
});
...

或者如果您使用的是Gulp 4，也许您可以改变您的'手表'任务（未经测试！）：

...
gulp.watch('index.html', gulp.series('html', function(){
    liverelaod.reload();
}));
...

或

gulp.task('reload', function() {
    livereload.reload();
});

...

gulp.task('watch', function() {
    livereload.listen();
    ...
    gulp.watch('index.html', gulp.series('html', 'reload'));
    ...
});

gulp livereload使用过时的css文件

1 个答案: