Question

我正在尝试将我的sass转换为compression-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文件。

我在google上搜索了可能的答案，但只找到较旧版本的解决方案。可以使用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();
})

修改时，代码会同时触发 'sass'和'scripts'任务，这很浪费（例如， 'sass'任务将在更改js文件时开始，但实际上对该js文件不执行任何操作，但会在没有更改scss文件的情况下不必要地运行sass重新编译）。

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();
  }))

}）

我不知道为什么会这样，但是现在可以正常工作

如何在Gulp 4中同时观看Sass和Javascript

2 个答案: