Как собрать проект gulp + vue файлы в один js и css?

Question

[Сергей Вершинин]

Привет. недавно начал разбираться со сборкой проекта, написанного на vuejs. Для простых вещей использовал gulp, поэтому начал c него.
В Gulp создал таски, который собирает js и scss в один файл. тут проблем нет. Но как быть, когда появляется vuejs ? у меня пока получилось собрать vue компоненты в 1 js и 1 css файл.

Хотелось бы узнать, а можно ли объединить это все? вот пример gulpfile.js.

Первое что пришло в голову, что нужно запускать все поочередно, т.е. сначала соберу vuejs приложение, а потом результаты соберу в общих тасках со стилями и скриптами JS.

но

gulp.task('build', ['clean', 'vue', 'styles', 'scripts', 'fonts']);

не запускается поочередно зависимые таски. Да, я знаю, что они(таски) запускаются одновременно, но еще читал, что если в каждом таске возвращать стримы - то должен порядок соблюдаться.

Может быть для такой задачи вообще gulp не подходит?

Помогите с направлением для решения проблемы

Comments

[Артем Каюн]

А зачем вы разделяете сборку vue и скриптов в разные таски? Это же все скрипты.

[Сергей Вершинин]

Артем Каюн: т.е. можно совместить сборку всех js + vue скриптов? пока не получается совместить упаковку js и в одном месте vueify

[Сергей Вершинин]

https://gist.github.com/versh23/b0c34e1ed467e6925e... так вот не вышло..

Answer 1

[Сергей delphinpro]

для строго очередного запуска попробуйте gulp-sequence

var gulpSequence = require('gulp-sequence');
var defaultTask = function (cb) {
    gulpSequence(['task1', 'task2'], ['task3', 'task4'], 'watch', cb);
};

task1 и task2 запустятся параллельно
task3 и task4 тоже
но сначала выполнится 1 и 2, потом 3 и 4, потом watch