Gulp.js — почему структура проекта создается не сразу?

Question

[Александр Зачиналов]

Коротко суть проблемы. В task default две задачи:

1) Сначала собирается bootstrap.min.js только из нужных библиотек и помещается в директорию dist в корне проекта
2) Потом собираются два файла стиля. Их конечный путь в dist/file1 и dist/file2 соответственно.

Перед запуском удаляю директорию dist, запускаю задачу - создается только папка dist с бутстрапом и все. Повторяю выполнение задачи - появляются папки file1 и file2 со стилями. Консоль выдает, что при первом и втором запусках обе задачи включенные в default выполнились успешно. Тогда почему полная сборка проходит только со второго раза?
Без удаления папки dist перед запуском ситуация та же - сначала .js, после повторного выполнения папки со стилями.
Кто сталкивался?

/*Default Task==================================================*/
gulp.task('default', ['getbootjs','getshopcss','getbtbcss'], function() {});
/*==============================================================*/

/*Bootstrap JS Build==============================================*/
gulp.task('getbootjs', function () {
  gulp.src(
      'src/bootstrap/js/button.js'
      //,'src/bootstrap/js/affix.js'
      //,'src/bootstrap/js/alert.js'
      //,'src/bootstrap/js/carousel.js'
      //,'src/bootstrap/js/collapse.js'
      //,'src/bootstrap/js/dropdown.js'
      //,'src/bootstrap/js/modal.js'
      //,'src/bootstrap/js/popover.js'
      //,'src/bootstrap/js/scrollspy.js'
      //,'src/bootstrap/js/tab.js'
      //,'src/bootstrap/js/tooltip.js'
      //,'src/bootstrap/js/transition.js'
    )
  .pipe(concat('bootstrap.js'))
  .pipe(gulp.dest('dist/'));
});
/*==============================================================*/

/*SHOP CSS Min Build============================================*/
gulp.task('getshopcss', function() {
  gulp.src('src/projects/shop/shop.less')
    .pipe(less())
    .pipe(gulp.dest('build/'))
    .pipe(autoprefixer('last 3 versions'))
  gulp.src(
      'build/shop.css'
      //,'src/plugins/css/plugin.css'
    )
    .pipe(concat('shop-plugins.css'))
    .pipe(cssmin())
    .pipe(rename('styles.css'))
    .pipe(gulp.dest('dist/shop/'))
    .pipe(connect.reload());
});
/*==============================================================*/

/*BTB CSS Min Build=============================================*/
gulp.task('getbtbcss', function() {
  gulp.src('src/projects/btb/btb.less')
    .pipe(less())
    .pipe(gulp.dest('build/'))
    .pipe(autoprefixer('last 3 versions'))
  gulp.src(
      'build/btb.css'
      //,'src/plugins/css/plugin.css'
    )
    .pipe(concat('btb-plugins.css'))
    .pipe(cssmin())
    .pipe(rename('styles.css'))
    .pipe(gulp.dest('dist/btb/'))
    .pipe(connect.reload());
});
/*=================================================================*/

Решение: у каждой вложеной задачи необходимо прописать все зависимые таски, а также после выполнения задач они должны возвращать свой стрим. Итоговый код для SHOP такой:

/*SHOP CSS Min Build============================================*/
gulp.task('getshopless', function() {
  return gulp.src('./src/projects/shop/shop.less')
  .pipe(less())
  .pipe(gulp.dest('./build/css/'));
});

gulp.task('getshopplugins',['getshopless'], function() {
  return gulp.src([

  		'src/plugins/css/plugin.css',
  		'src/plugins/css/plugin2.css'
  	
  		])
  .pipe(concat('shop-plugins.css'))
  .pipe(gulp.dest('./build/css/'));
});

gulp.task('getshopstyles',['getshopplugins'], function() {
  return gulp.src('./build/css/*.css')
  	.pipe(concat('shop-styles.css'))
  	.pipe(autoprefixer('last 15 versions'))
    .pipe(cssmin())
    .pipe(rename('styles.min.css'))
    .pipe(gulp.dest('./dist/shop/'))
  	
});
/*==============================================================*/

Comments

[personaljs]

можно общий вид таска?

[Александр Зачиналов]

Да, извините, затупил

Answer 1

[Сергей Протько]

эм... почитайте в документации про done колбэк, про то что можно вернуть пайп из таска (будет работать как промис), разнесите таск getbtbcss на два и пропишите зависимости...

Короче у вас проблема с тем что таски выполняются асинхронно, а вы никак не говорите gulp-у когда у вас что закончилось и когда можно начинать следующее.

Comments

[Александр Зачиналов]

Разбил на задачи и запускаю их в правильной последовательности через gulp-sync, если я правильно понял этот плагин как раз запускает их не асинхронно. Результат прежний, я уже всю голову сломал. Не знаете есть ли плагин, который более подробно выводит лог выполнения задач?

[Александр Зачиналов]

Сначала думал что ошибся где-то, но нет - ручной запуск задач по очереди срабатывает как надо

[Сергей Протько]

@SanDiesel: gulp-sync то вам зачем? И актуализируйте тогда в примере ваш gulpfile. Или залейте на pastebin или gist.

Я говорил об этом: https://github.com/gulpjs/gulp/blob/master/docs/re...

[Александр Зачиналов]

Спасибо разобрался!

Answer 2

[personaljs]

/*Default Task==================================================*/
gulp.task('default', function() {
gulp.run(['getbootjs','getshopcss','getbtbcss']);
});
/*==============================================================*/

/*Bootstrap JS Build==============================================*/
gulp.task('getbootjs', function () {
  return gulp.src('src/bootstrap/js/*.js')
             .pipe(concat('bootstrap.js'))
             .pipe(gulp.dest('dist/'))
             .pipe(connect.reload());

});
/*==============================================================*/

/*SHOP CSS Min Build============================================*/
gulp.task('getshopcss', function() {
  return gulp.src('src/projects/shop/shop.less')
             .pipe(less())
             .pipe(gulp.dest('build/'))
             .pipe(autoprefixer('last 3 versions'))
             .pipe(cssmin())
             .pipe(rename('styles.css'))
             .pipe(gulp.dest('dist/shop/'))
             .pipe(connect.reload());

});
/*==============================================================*/

/*BTB CSS Min Build=============================================*/
gulp.task('getbtbcss', function() {
  return gulp.src('src/projects/btb/btb.less')
            .pipe(less())
            .pipe(gulp.dest('build/'))
            .pipe(autoprefixer('last 3 versions'))
            .pipe(cssmin())
            .pipe(rename('styles.css'))
            .pipe(gulp.dest('dist/btb/'))
            .pipe(connect.reload());
});

а так работает?

Comments

[Александр Зачиналов]

Спасибо за помощь, кое-что подглядел и частично это выручило