如何在gulp 4中同时观看sass和javascript

Question

我试图将我的sass转换为compressed-css和javascript到uglified-js。而watch scss和js都发生了变化

我的代码工作正常，但是当我尝试保存一个js文件时，它会进入一个不可阻挡的循环。

这是我的代码：

var gulp = require('gulp');
var sass = require('gulp-sass');    
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('sass', function(done){

    gulp.src('public/sass/**/*.scss')
      .pipe(sass({outputStyle: 'compressed'})) // Using gulp-sass
      .pipe(gulp.dest('public/stylesheets'))

      done();
  });

gulp.task('scripts', function(done){

    gulp.src('public/javascripts/**/*.js')
        .pipe(concat('scripts.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/javascripts'))

        done();
});


  gulp.task('watch', function(){
        //I made .scss and .js into an array so they will both be watched
    gulp.watch(['public/sass/**/*.scss', 'public/javascripts/**/*.js' ], gulp.series('sass', 'scripts', function(done) {


        done();
      }))
  })

现在，当我运行gulp watch它正在工作但是当我保存一个js文件时，我进入一个保存循环，它保存并保存并保存不间断。

我已经使scss使用此代码

 gulp.task('watch', function(){
    gulp.watch('public/sass/**/*.scss', gulp.series('sass', 'scripts', function(done) {


        done();
      }))
  })

但我不知道如何让我看到.js文件。

我搜索谷歌寻找可能的答案，但只找到旧版本的解决方案。有没有办法用gulp4做到这一点？

• 我也试过gulp.parallel但它仍然循环

请帮忙。谢谢

Answer 1

你原来的代码：

gulp.task('watch', function(){
        //I made .scss and .js into an array so they will both be watched
    gulp.watch(['public/sass/**/*.scss', 'public/javascripts/**/*.js' ], gulp.series('sass', 'scripts', function(done) {

    done();
    }))
})

应该

gulp.task('watch', function(done){

    // added done above too

    gulp.watch('public/sass/**/*.scss', gulp.series('sass') )
    gulp.watch('public/javascripts/**/*.js', gulp.series('scripts') )
    done();
})

当scss或js文件被修改时，你的代码会触发'sass'和'scripts'任务，这很浪费（例如，'sass'任务将在更改js文件但不实际对该js文件执行任何操作时启动，但将不必要地运行sass重新编译虽然没有改变scss文件）。

Answer 2

我通过这样做解决了这个问题：

 gulp.task('watch', function(){
          //I added the src folder instead of the glob **(two asterisk)
          gulp.watch(['public/sass/**/*.scss', 'public/javascripts/src/*.js'], gulp.series('sass', 'scripts', function(done) {


    done();
  }))

})

我不知道为什么会这样，但它现在正在运作