Как одновременно смотреть sass и javascript в gulp 4

Я пытаюсь преобразовать свой sass в сжатый 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 но все равно зацикливается

Пожалуйста помоги. Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
456
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.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' при изменении либо файла scss или js, что расточительно (например, задача 'sass' запустится при изменении файла js, но на самом деле ничего не сделает с этим файлом js, но будет без необходимости запускать перекомпиляция sass, хотя файл scss не изменился).

Спасибо за это, я новичок в gulp, и все уроки, которые я видел, чрезвычайно сложны для понимания.

bradrar 07.03.2019 19:19

Другие вопросы по теме