необходимо автоматически найти все файлы css.js,img,fonts и разместить их в соответствующие папаки
Подскажите пожалуйста есть ли возможность у сборщиков типа webpack или Gulp отсортировать папку с проектом и упорядочить все в нужных папках с нужными путями? Поясню: 1 вариант задачи: есть проект ( мой проект ) в папке лежат файл картинок, скриптов, стилей и html файл (все на одном уровне), а мне необходимо, чтоб был html файл, папка стилей в которой лежит стилевой файл, папка картинок в которой лежат картинки и так далее. И плюс , чтоб автоматически правились пути к нужным файлам.
2 вариант задачи: Очень большая вложенность т.е. попка с проектом . и пошла череда вложенных папок (папка 1/папка2/папка3/папка4/папка5/.../файлы) роезультат нужен как и в первой задаче. Буду очень плагодарен за развернутый ответ детальный ответ с примерами т.к. технологиями указанными выше не владею. Заранее большое спасибо!
Ответы (1 шт):
Да, на примере Gulp решение 1-задачи:
В моем случае текущий конфигурационный файл называется gulpfile.js.
const {src, dest, series, watch} = require('gulp');
const sync = require('browser-sync').create()
...
// Здесь идет поиск всех файлов из папки app с расширением html и сборка в папку html
function html() {
return src('app/**/*.html')
.pipe(dest('docs/html'));
}
// Здесь идет поиск всех файлов из папки app с расширением css и сборка в папку css
function css() {
return src('app/**/*.css')
.pipe(dest('docs/css'))
}
// Здесь идет поиск всех файлов из папки app с расширением js и сборка в папку js
function js() {
return src('app/**/*.js')
.pipe(dest('docs/js'))
}
// Здесь идет поиск всех картинок из папки app и сборка в папку img
function img() {
return src(['app/**/*.jpg', 'app/**/*.png'])
.pipe(dest('docs/img'));
}
...
// Здесь уже запускаем функции, которых выше объявляли:
function serve() {
sync.init({
port: 3010,
reloadOnRestart: true,
server: {
baseDir: 'docs',
directory: true
}
});
watch('app/**/*.html', series(html)).on('change', sync.reload);
watch('app/**/*.css', series(css, html)).on('change', sync.reload);
watch('app/**/*.js', series(js)).on('change', sync.reload);
watch(['app/**/*.jpg', 'app/**/*.png'], series(img)).on('change', sync.reload);
}
exports.build = series(css, js, img, html);
exports.watch = series(css, js, img, html, serve);
Для запуска прописать в терминале gulp watch