browserSync 不重新编译 SCSS 文件

Question

我刚开始使用 Gulp，但我遇到了一个找不到任何解决方案的问题。我已经阅读了关于它的每一个问题，但没有解决它。我也在使用 XAMPP 和虚拟主机。

这是gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

var styleSrc = "./resources/scss";

gulp.task('default', ['watch','sass'], function(){});

// Watch for changes
gulp.task('watch', function(){

    // Serve files from the root of this project
    browserSync.init({
        proxy: 'starter.web'
    });

    gulp.watch(styleSrc,['sass']).on('change', browserSync.reload);
    gulp.watch('./public/*.php').on('change', browserSync.reload);

});

gulp.task('sass', function(){
    return gulp.src('./resources/scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/css'))
        .pipe(browserSync.reload({ stream: true }))
});

问题是，当我启动 gulp 时，它将 scss 文件编译为 css 并启动 browserSync，之后，如果我在 php 文件，没问题，但是如果我更改 scss 文件中的任何内容，这就是我得到的输出：

cmd.exe /D /C call "C:\Users\User\AppData\Roaming\npm\sass.cmd" --no-cache --update main.scss:main.css
Could not find an option named "cache".

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/>

=== Input and Output ===================
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=<PATH>         A path to use when resolving imports.
                               May be passed multiple times.

-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]

    --update                   Only compile out-of-date stylesheets.

=== Source Maps ========================
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)

    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]

    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

=== Other ==============================
    --watch                    Watch stylesheets and recompile when they change.
    --[no-]poll                Manually check for changes rather than using a native watcher.
                               Only valid with --watch.

    --[no-]stop-on-error       Don't compile more files once an error is encountered.
-i, --interactive              Run an interactive SassScript shell.
-c, --[no-]color               Whether to emit terminal colors.
-q, --[no-]quiet               Don't print warnings.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.

Process finished with exit code 64

它不会重新编译它。有人知道发生了什么事吗？

Answer 1

我不是 gulp

方面的专家

我假设您使用的是 gulp 3

你的代码应该是

    var gulp = require('gulp');
    var browserSync = require('browser-sync').create();
    var sass = require('gulp-sass');

    var styleSrc = "./resources/scss";

    gulp.task('sass', function(){
     return gulp.src('./resources/scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/css'))
        .pipe(browserSync.reload({ stream: true }))
    });


    gulp.task('browser-sync',['sass'] function() {
       browserSync.init({
           server: {
              baseDir: "./"
             }
          });
           gulp.watch(styleSrc, ['sass']);
           gulp.watch("./public/*.php").on('change', browserSync.reload);
       });
    gulp.task('default', ['sass',  'browser-sync']

将此用作您的 gulpfile.js

和运行gulp

browserSync 不重新编译 SCSS 文件

browserSync not recompiling SCSS files

sass

gulp

gulp-watch

browser-sync