Gulp watch 不会在每次修改时编译我的 .scss

Question

我遇到了 Gulp 的问题，我无法在每次修改时编译我的 .scss。当我运行 "gulp watch" 并在我的 css 中进行更改时，没有任何反应。

gulp css 有效，gulp watch 无效。

但一切看起来都很好。

你有想法吗？

谢谢！

// Requires
var gulp = require('gulp');

// Include plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
// var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');


// tâche CSS = compile vers knacss.css et knacss-unminified.css
gulp.task('css', function () {
  return gulp.src('./src/assets/css/style.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(rename('knacss.css'))
    .pipe(gulp.dest('./dist/assets/css/'))
    .pipe(rename('style.css'))
    //.pipe(sourcemaps.init())
    .pipe(minifycss())
    //.pipe(sourcemaps.write('.', {includeContent: false}))
    .pipe(gulp.dest('./dist/assets/css/'));
});

// Watcher
gulp.task('watch', function() {
  gulp.watch(['./src/assets/css/*.scss'], ['css']);
});


gulp.task('default', ['css']);

Answer 1

试试类似的东西。

//SASS task
gulp.task('sass', function () {
    var sassPath = {
        cssSrc: ['./src/assets/css/*.scss'], cssDest: './src/assets/css/'
    };
    gulp.src(sassPath.cssSrc)

      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest(sassPath.cssDest))
      .pipe(livereload());
});

然后在您的手表中：

// Watcher
gulp.task('watch', function() {
  gulp.watch(['./src/assets/css/*.scss'], ['sass']);
});

和：

gulp.task('default', ['sass','css']);

Answer 2

Gulp watch doesn't not compile my .scss at each modification

那是因为你没有告诉它。

您只观看 ./src/assets/css 中的 *.scss 个文件，而不是子文件夹中的文件。

要包含子文件夹，请使用以下语法：

gulp.task('watch', function() {
  gulp.watch(['./src/assets/css/**/*.scss'], ['css']);
});

Gulp watch 不会在每次修改时编译我的 .scss

Gulp watch doesn't not compile my .scss at each modification

gulp

gulp-watch

gulp-sass

那是因为你没有告诉它。