时间戳

首页 > 解决方案 > Gulp 和 LiveServer（VS 代码扩展）问题（保存两次）

javascript - Gulp 和 LiveServer（VS 代码扩展）问题（保存两次）

问题描述

我在使用 Gulp 和我的 VS Code 扩展时遇到问题 - LiveServer

我设置了 Gulp 任务来编译我的 Sass，缩小我的 CSS，然后观察变化。实时重新加载是通过我上面提到的扩展来处理的。但是，当我保存时，我的任何更改都不会生效，除非我保存两次。

我怀疑这是我 Gulp 任务的一部分，但在工作了大约 30 分钟后无法修复它。任何帮助是极大的赞赏。我的 Gulp 任务如下：

const cleanCSS = require("gulp-clean-css");
const sass = require("gulp-sass");

sass.compiler = require('node-sass');

function compileSass() {
  return gulp 
  .src('./assets/css/styles.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./assets/css'))
}

function minifyCSS() {
  return gulp
    .src("./assets/css/*.css")
    .pipe(cleanCSS())
    .pipe(gulp.dest("./assets/minified"));
}

gulp.task("compileSass", compileSass);
gulp.task("minify-css", minifyCSS);

gulp.task("watch", () => {
  gulp.watch("./assets/css/styles.scss", compileSass);
  gulp.watch("./assets/css/*.css", minifyCSS);
});

gulp.task("default", gulp.series("compileSass","minify-css", "watch"));

标签： javascriptcssnode.jssassgulp

解决方案

尝试重新安装 Vscode 和必要的扩展。或者在 Vscode 中，在文件部分选择“自动保存”选项。这将解决点击保存 2 次的问题，并尝试安装来自实时服务器创建者的实时 sass 编译器，它将 sass 实时编译为 Css

推荐阅读