Я кодирую много маленьких «блоков», частей большого сайта. Мне нужно, чтобы у каждого блока была своя папка и файлы html, scss и иногда js. Затем все файлы должны быть скомпилированы (scss, ES6) и скопированы в каталог dist
с той же структурой папок, что и в исходном (каждый блок отделен). Для автоматизации процесса я использую Gulp. Я использовал gulp-flatten для поддержания структуры папок, и она работает довольно хорошо. Вот фрагмент моего gulpfile:
function css() {
return src("blocks/**/*.scss")
.pipe(flatten({ includeParents: 1 }))
.pipe(sass())
.pipe(dest("../dist/blocks"));
}
function html() {
return src("blocks/**/*.html")
.pipe(flatten({ includeParents: 1 }))
.pipe(dest("../dist/blocks"));
}
function scripts() {
return src("blocks/**/*.js")
.pipe(flatten({ includeParents: 1 }))
.pipe(babel())
.pipe(dest("../dist/blocks"));
}
Работает нормально, когда нет импорта в js-файлы. Но в некоторых блоках мне придется импортировать несколько пакетов npm, поэтому мне нужно будет связать код js.
Как я могу это сделать? Я не хочу связывать все , я хочу отдельно связывать файлы js для каждого блока и сохранять их в своих папках dist, как я делаю это сейчас с scss.