Question

我遇到了Gulp的问题，我无法在每次修改时编译我的.scss。当我跑步＆＃34; gulp watch＆＃34;并在我的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在每次修改时都不会编译我的.scss

那是因为你没有告诉它。

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

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

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

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

2 个答案:

那是因为你没有告诉它。