Node.js 如果此任务在文件更改时启动，如何运行任务（更改文件）并避免循环

我有以下任务：

• 将我的Sass代码编译成css的“样式”
• “监视”将在.sass文件更改时启动“样式”
• 启动所有任务的“deafult”

在我想对属性进行排序之前，一切都还不错，我找到了可以从CLI工作的sass排序模块。我还下载了gulpexec模块，因此我可以将命令

sortsass./src/styles/main.sass

添加到我的任务

styles

我试图从“样式”中取出

.pipe（exec（'sortsass./src/styles/main.sass'））

，创建新任务，并将其添加到“监视”任务中（因此在文件更改后，任务“样式”和新任务开始），结果相同。还尝试通过谷歌搜索其他方式对.sass文件中的属性进行排序（style lint在scss中工作得非常好，但我正在使用sass），尝试为

vscode

找到扩展名，这些扩展名可以做到这一点

    const gulp         = require('gulp');
    const browserSync  = require('browser-sync').create();
    const del          = require('del');
    const imagemin     = require('gulp-imagemin')
    const concat       = require('gulp-concat');
    const uglify       = require('gulp-uglify');
    const sourcemaps   = require('gulp-sourcemaps');
    const sass         = require('gulp-sass');
    const cleanCSS     = require('gulp-clean-css');
    const autoprefixer = require('gulp-autoprefixer');
    const exec         = require('gulp-exec');

    gulp.task('clean', function() {
      return del([
        'build/*']);
    });

    gulp.task('markup', function() {
      return gulp.src([
        './src/**/*.html'
      ],  {base: './src/'})
        .pipe(gulp.dest('./build/'))
        .pipe(browserSync.stream());
    });

    gulp.task('styles', function() {
      return gulp.src([
        './src/**/*.sass'
      ],  {base: './src/'}) 
        .pipe(exec('sortsass ./src/styles/main.sass'))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(cleanCSS({level: 2}))
        .pipe(autoprefixer({Browserslist: ['last 2 versions'], cascade: false}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./build/'))
        .pipe(browserSync.stream())
    });

    gulp.task('scripts', function() {
      return gulp.src([
        './src/js/lib.js',
        './src/js/main.js',
      ],  {base: './src/'})
        .pipe(uglify({toplevel: true}))
        .pipe(gulp.dest('./build/'))
        .pipe(browserSync.stream());
    });

    gulp.task('concat-scripts', function() {
      return gulp.src([
        './build/js/lib.js',
        './build/js/main.js',
      ])
        .pipe(concat('script.js'))
        .pipe(gulp.dest('./build/js/'))
        .pipe(browserSync.stream());
    })

      gulp.task('images', function() {
        return gulp.src([
          './src/img/**'
        ],  {base: './src/'})
          .pipe(imagemin({progressive: true}))
          .pipe(gulp.dest('./build/'))
          .pipe(browserSync.stream());
    });

    gulp.task('watch', function() {
      browserSync.init({
        server: {
            baseDir: "./build/"
        }
      });
      gulp.watch('./src/**/*.html', gulp.series('markup'))
      gulp.watch('./src/**/*.sass', gulp.series('styles'))
      gulp.watch('./src/**/*.js', gulp.series('scripts', 'concat-scripts'))
      gulp.watch('./src/**/img/**/*', gulp.series('images'))
    });

    gulp.task('trash', function() {
      return del([
        './build/styles/media.css',
        './build/styles/media.css.map',
        './build/js/lib.js',
        './build/js/main.js',
      ]);
    });

    gulp.task('default', gulp.series(gulp.series('clean',
                                   gulp.parallel('markup',
                                                 'images',
                                                 'styles',
                                                 'scripts')),
                                                 'concat-scripts',
                                                 'trash',
                                                 'watch'))

启动“默认”任务时：

    [19:35:15] Using gulpfile ~\Desktop\projects\new\gulpfile.js
    [19:35:15] Starting 'default'...
    [19:35:15] Starting 'clean'...
    [19:35:15] Finished 'clean' after 34 ms
    [19:35:15] Starting 'markup'...
    [19:35:15] Starting 'images'...
    [19:35:15] Starting 'styles'...
    [19:35:15] Starting 'scripts'...
    [19:35:15] gulp-imagemin: Minified 0 images
    [19:35:15] Finished 'images' after 58 ms
    [19:35:15] Finished 'markup' after 61 ms
    [19:35:15] Finished 'scripts' after 61 ms
    [19:35:15] Finished 'styles' after 239 ms
    [19:35:15] Starting 'concat-scripts'...
    [19:35:15] Finished 'concat-scripts' after 9.62 ms
    [19:35:15] Starting 'trash'...
    [19:35:15] Finished 'trash' after 5.4 ms
    [19:35:15] Starting 'watch'...
    [Browsersync] Access URLs:
     ------------------------------------
           Local: http://localhost:3000
        External: http://192.168.0.4:3000
     ------------------------------------
              UI: http://localhost:3001
     UI External: http://localhost:3001
     ------------------------------------
    [Browsersync] Serving files from: ./build/

and when I am changing sass file

    [19:36:46] Starting 'styles'...
    [Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
    [19:36:47] Finished 'styles' after 264 ms
    [19:36:47] Starting 'styles'...
    [Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
    [19:36:47] Finished 'styles' after 228 ms
    [19:36:47] Starting 'styles'...
    [Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
    [19:36:48] Finished 'styles' after 223 ms
    [19:36:48] Starting 'styles'...
    [Browsersync] 4 files changed (main.css.map, main.css, media.css.map, media.css)
    [19:36:48] Finished 'styles' after 207 ms
    [19:36:48] Starting 'styles'...

这个循环是无止境的，直到我关闭终端

---

所以现在真正的问题更多的是如何对属性进行排序，然后如何避免循环。。但我对任何解决方案都很满意（避免循环，或其他排序属性的方法：vscode扩展、gulp插件等）

CSSComb帮助了我。在vscode中安装了它，CSSComb帮助了我。在vscode中安装它

使用网页：）这一个更好使用网页：）这一个更好