Gulp 4 - 检测旧版本中的更改，但不向 css 添加新类

Question

我的 gulp 4 有一个可笑的问题。

我有来自我的程序员的代码。 我尝试对代码进行一些更改 - 一切正常（更改 px 或向现有类添加新属性）。

当我想向 scss 添加新的类/id 时，问题就开始了。 Gulp 没有检测到添加的类，甚​​至是新的 id。

如果我添加新的@import 文件，Gulp 会检测到新文件但里面有任何新代码...

(() => {

  'use strict';



  const


    devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development'),


    dir = {
      src: 'src/',
      build: 'build/'
    },


    gulp = require('gulp'),
    del = require('del'),
    noop = require('gulp-noop'),
    newer = require('gulp-newer'),
    size = require('gulp-size'),
    imagemin = require('gulp-imagemin'),
    sass = require('gulp-sass'), // or use gulp-dart-sass
    postcss = require('gulp-postcss'),
    sourcemaps = devBuild ? require('gulp-sourcemaps') : null,
    browsersync = devBuild ? require('browser-sync').create() : null;


  console.log('Gulp', devBuild ? 'development' : 'production', 'build');




  function clean() {

    return del([dir.build]);

  }
  exports.clean = clean;
  exports.wipe = clean;



  const imgConfig = {
    src: dir.src + 'images/**/*',
    build: dir.build + 'images/',
    minOpts: {
      optimizationLevel: 5
    }
  };

  function images() {

    return gulp.src(imgConfig.src)
      .pipe(newer(imgConfig.build))
      .pipe(imagemin(imgConfig.minOpts))
      .pipe(size({
        showFiles: true
      }))
      .pipe(gulp.dest(imgConfig.build));

  }
  exports.images = images;




  const cssConfig = {

    src: dir.src + 'scss/main.scss',
    watch: dir.src + 'scss/**/*',
    build: dir.build + 'css/',
    sassOpts: {
      sourceMap: devBuild,
      imagePath: '/images/',
      precision: 3,
      errLogToConsole: true
    },

    postCSS: [
      require('usedcss')({
        html: ['index.html']
      }),
      require('postcss-assets')({
        loadPaths: ['images/'],
        basePath: dir.build
      }),
      require('autoprefixer')({
        browsers: ['> 1%']
      }),
      require('cssnano')
    ]

  };


  function css() {

    return gulp.src(cssConfig.src)
      .pipe(sourcemaps ? sourcemaps.init() : noop())
      .pipe(sass(cssConfig.sassOpts).on('error', sass.logError))
      .pipe(postcss(cssConfig.postCSS))
      .pipe(sourcemaps ? sourcemaps.write() : noop())
      .pipe(size({
        showFiles: true
      }))
      .pipe(gulp.dest(cssConfig.build))
      .pipe(browsersync ? browsersync.reload({
        stream: true
      }) : noop());

  }
  exports.css = gulp.series(images, css);




  const syncConfig = {
    server: {
      baseDir: './',
      index: 'index.html'
    },
    port: 8000,
    open: false
  };


  function server(done) {
    if (browsersync) browsersync.init(syncConfig);
    done();
  }




  function watch(done) {

    // image changes
    gulp.watch(imgConfig.src, images);

    // CSS changes
    gulp.watch(cssConfig.watch, css);

    done();

  }



  exports.default = gulp.series(exports.css, watch, server);

})();

Answer 1

问题解决了...（我希望） 我已经安装了https://www.npmjs.com/package/webpack/v/4.28.4

现在可以了。