Как написать собственный скрипт для сборки front-end'а используя команды вместо готовых модулей
В процессе обучения у меня появилась необходимость оптимизировать процесс сборки моих проектов. Препроцессоры, сжатие картинок, pugjs и т.п. Начал смотреть в сторону webpack и gulp но столкнулся с проблемой: задачи, которые можно на них составить могут содержать в себе только уже написанные конкретно для них модули. То есть вместо обычного sass приходится использовать gulp-sass, который намного реже обновляется, а некоторых пакетов(например squoosh-cli) для них вообще нет. Хотелось бы написать скрипт, который просто запускал в консоли что то типа:
sass --watch app/scss:dist/css
squoosh-cli auto -d dist/img app/img
Но --watch займет консоль и никакие процессы дальше не пойдут. А task runner'ы используют node.js чтобы такие процессы распараллелить. Не запускать же для каждой строчки свою консоль. В общем есть ли какие то программы, которые позволяют писать подобные наборы команд и выполнять их параллельно или последовательно, в зависимости от моего решения? Или может есть какой то другой способ писать такие штуки, о котором я не знаю? Работаю на windows, пакеты гружу через npm. Заранее спасибо
Ответы (2 шт):
Вместо gulp можно сделать сборку напрямую через npm. Тогда можно использовать всегда свежие инструменты, а не специально созданные для gulp, которые редко обновляются.
Чтобы запустить несколько модулей одновременно можно использовать пакет "concurrently". Тогда в файле package.json "scripts" могут выглядеть примерно так:
"scripts": {
"watch-sass" : "sass --watch app/scss:app/css",
"watch-csso" : "csso app/css/style.css --output dist/css/style.min.css --watch",
"watch-pug" : "pug app/index.pug -w -o dist/",
"start" : "concurrently \"npm:watch-*\""
}
Создается несколько отдельных скриптов, в данном случае "watch-sass", "watch-csso", "watch-pug". А потом запускаются все вместе через скрипт "start". В начале работы нужно будет просто набирать в консоли
npm start