Как правильно написать таск?

Question

[Alexander]

Имеется 3 таска для sass, js и watch
Задача сделать default таск для Gulp 4, чтобы при его запуске сразу формировались css, js файлы, а после запускался watch и browser sync.
P.S. Если написать так как показано ниже, то при запуске и дальнейших изменениях в sass или js файлах, соответствующие таски будут выполняться дважды, а этого не нужно.

gulp.task('default', gulp.series(
   gulp.parallel('styles', 'scripts', 'images'),
   gulp.parallel('watch', 'browser-sync')
));

Примеры тасков
styles

gulp.task('styles', function(){
   return gulp.src(source+'/'+syntax+'/**/*.'+syntax)
      .pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
      .pipe(autoprefixer(['last 15 versions']))
      .pipe(cleancss({ level: { 1: { specialComments: 'all' } } }))
      .pipe(rename({ prefix: '', suffix: '.min' }))
      .pipe(gulp.dest(source+'/css'))
      .pipe(browserSync.stream())
});

scripts

gulp.task('scripts', function() {
   return gulp.src(source+'/js/**/*.js')
      .pipe(concat('scripts.js'))
      .pipe(uglify())
      .pipe(rename({prefix: '', suffix: '.min'}))
      .pipe(gulp.dest(source+'/js'))
      .pipe(browserSync.stream())
});

browser sync

gulp.task('browser-sync', function() {
   browserSync({
      server: {
         baseDir: source
      },
      notify: false,
   })
});

watch

gulp.task('watch', function() {
   gulp.watch(source+'/*.html')
   gulp.watch(source+'/'+syntax+'/**/*.'+syntax)
   gulp.watch(source+'/js/common.js')
});

Comments

[Андрей]

какой странный watch просто следит и ничего не выполняет

Answer 1

[grinat]

Что-то по гальпу 4 стало много вопросов, не используйте сразу новую версию, ждите какое-то время, пока не появятся доки и uses cases, потом только переходите.

Comments

[Alexander]

1. С первого появления Gulp 4 прошло уже достаточно времени и им уже можно давно пользоваться, документация есть, но в ней нет ответа на мой вопрос.
2. От куда в названии присутствует "ь" знак?
Да и вообще зачем писать такие ответы? Если бы я хотел узнать (что навряд ли) пользоваться мне 4 версией или нет, я бы задал соответствующий вопрос.

[grinat]

Alexander, если в доках нет ответа на вопрос, значит контрибутеров еще недостаточно задолбали вопросами об этом путем создания одних и тех же исуе в гите, либо им пофиг - в этом случае надо смотреть исходники.

Answer 2

[Эдуард Трайт]

Может поможет мой пример:

spoiler

gulp.task('server', function () {
server.init({
server: 'build/',
notify: false,
open: true,
cors: true,
ui: false
});

gulp.watch('source/sass/**/*.{scss,sass}', gulp.series('sass'));
gulp.watch('source/*.html', gulp.series('html', 'refresh'));
gulp.watch('source/js/*.js', gulp.series('js'));
});

gulp.task('build', gulp.series('clean', 'copy', 'html', 'sass', 'js'));

gulp.task('start', gulp.series('build', 'server'));

Я когда писал его, тоже пытался сделать отдельный таск на watch. Но что-то там не работало, но работает, если watch'ры прописать в таске сервера. Возможно, это то, что вы ищите.

Comments

[Alexander]

Спасибо, но я переписал весь gulpfile.js и полностью перешел на Gulp 4.