@zetproj

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

Имеется 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')
});
  • Вопрос задан
  • 545 просмотров
Пригласить эксперта
Ответы на вопрос 2
@grinat
Что-то по гальпу 4 стало много вопросов, не используйте сразу новую версию, ждите какое-то время, пока не появятся доки и uses cases, потом только переходите.
Ответ написан
EdMSL
@EdMSL
Free Developer
Может поможет мой пример:
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'ры прописать в таске сервера. Возможно, это то, что вы ищите.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы