看了没看

Question

当我编辑main.scss时，我的gulpfile配置出现问题，终端中正在运行gulp watch，但是它无法检测到main.scss中所做的更改，但是当我运行gulp.sass时，它将检测到更改后，我已经浏览了其他一些“大问题”，但仍然找不到解决方法，我在做什么错？让我知道是否需要更清楚

Folder directory - 
weather-app
 ---node_modules
 ---public
    ---css
        ---main.css
    ---js
        ---main.js
 ---index.html
 ---src
    ---sass
        ---main.scss
        ---mobile.scss
    ---js
        ---main.js
 ---gulpfile.js
 ---package-lock.json
 ---package.json

const gulp = require('gulp'),
  sass = require('gulp-sass'),
  uglifyCss = require('gulp-uglifycss'),
  concatCss = require('gulp-concat-css');


gulp.task('sass', () => {
  gulp.src('src/sass/*.scss')
    .pipe(sass())
    .pipe(uglifyCss({
      'uglyComments': true
    }))
    .pipe(concatCss('main.css'))
    .pipe(gulp.dest('public/css'))
})

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



gulp.task('watch', () => {
  gulp.watch('src/sass/*.scss', ['watch'])
})

Answer 1

gulp.watch不能为返回值。
不要忘记使用双星号来定位 sass 文件夹中的任何 .scss 文件。

About the ** glob character

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

Answer 2

将gulp监视行更改为 gulp.watch('src/sass/**/*.scss', ['watch'])

Answer 3

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    uglifyCss = require('gulp-uglifycss'),
    concatCss = require('gulp-concat-css');


gulp.task('sass', () => {
    gulp.src('src/sass/**/*.scss')
        // gulp.src('src/sass/*.scss')
        .pipe(sass())
        .pipe(concatCss('main.css'))
        .pipe(uglifyCss({
            'uglyComments': true
        }))
        .pipe(gulp.dest('public/css'))

})

gulp.task('default', ['watch']); //i changed 'sass' to 'watch'



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

感谢大家的贡献，我修复了它，这是我忽略的一个小错误

Answer 4

这是错误的行：

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

因此，您必须将watch称为默认任务。所以这是解决方案：

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

这条线从

 gulp.watch('src/sass/*.scss', ['watch'])

到

 gulp.watch('src/sass/*.scss', ['sass'])

仅此而已。 ：）