Форум программистов, компьютерный форум, киберфорум
Node.js
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 13.02.2020
Сообщений: 23

Настройка Gulp

17.08.2020, 13:01. Показов 812. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Имею вот такой код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
const
    { src, dest, parallel, watch, series } = require('gulp'),
    _browserSync = require('browser-sync').create(),
    groupQueries = require('gulp-group-css-media-queries'),
    autoprefixer = require('gulp-autoprefixer'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
    cleanCss = require('gulp-clean-css'),
    fileInclude = require('gulp-file-include'),
    del = require('del');
 
 
const 
    sourceDir = '#source',
    distDir = 'dist';
 
const 
    mainHtmlFilename = 'index.html',
    mainStyleFilename = 'main.scss';
 
const path = {
    source: {
        html: `${sourceDir}/${mainHtmlFilename}`,
        style: `${sourceDir}/style/${mainStyleFilename}`,
        js: `${sourceDir}/js/**/*.js`,
        img: `${sourceDir}/img/**/*.{jpg|png|svg|gif|ico|webp}`,
        font: `${sourceDir}/font/**/*.{ttf|eot|off|woff2|svg}`
    },
    dist: {
        html: `${distDir}/`,
        style: {
            uncompressed: `${distDir}/style/uncompressed/`,
            compressed: `${distDir}/style/compressed/`
        },
        js: {
            uncompressed: `${distDir}/js/uncompressed/`,
            compressed: `${distDir}/js/compressed/`
        },
        img: `${distDir}/img/`,
        font: `${distDir}/font/`
    },
    watch: {
        html: `${sourceDir}/{htmlIncludes/**/*|index}.html`,
        style: `${sourceDir}/style/**/*.{css|scss|sass|less}`,
        js: `${sourceDir}/js/**/*.js`,
        img: `${sourceDir}/img/**/*.{jpg|png|svg|gif|ico|webp}`,
        font: `${sourceDir}/font/**/*.{ttf|eot|off|woff2|svg}`
    },
    clean: `${distDir}/`
}
 
function browserSync() {
    _browserSync.init({
        server: {
            baseDir: `${distDir}/`
        }
    });
}
 
function html() {
    return src(path.source.html)
        .pipe(fileInclude())
        .pipe(dest(path.dist.html))
        .pipe(_browserSync.stream());
}
 
function watchFile() {
    watch(path.watch.html, html);
}
 
function clean() {
    return del(path.clean);
}
 
const 
    build = series(clean, parallel(html)),
    _default = parallel(build, browserSync, watchFile);
 
exports.default = _default;
И я хотел бы спросить как реализовать такое:
JavaScript
1
 gulp.src(`directory1/{directory2/**/*|index}.html`)
Данный код не работает. Я хочу из directory1 взять index.html и из ее поддиректории directory2 взять все файлы с расширением html. Как мне это сделать? Буду благодарен за ответ
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
17.08.2020, 13:01
Ответы с готовыми решениями:

Переход на Gulp v4 Перестал работать плагин сборщик спрайтов gulp.spritesmith
Перешел на новую версию Gulp (v4) и мой галп сборщик превратился в тыкву, Подскажите, как исправить что б работало как прежде? Мой...

Gulp rigger и gulp include file при сборке html файла ломают верстку
Добрый вечер. Осваиваю gulp. На данном этапе мне нужна только вставка повторяющегося кода. Сверстанная обычным способом страница...

Susy+Gulp
Добрый день. Нужна помощь в подключении Susy к Gulp. Я добавил модуль в проект npm i susy --save И дальше просто в файле sass дописал...

1
Coding is art
Эксперт JS
540 / 423 / 154
Регистрация: 04.09.2013
Сообщений: 1,066
18.08.2020, 12:12
https://stackoverflow.com/a/26786529 данный ответ может вам помочь. По сути нужно для каждой папки вызывать gulp.src...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
18.08.2020, 12:12
Помогаю со студенческими работами здесь

Gulp truble
Прошу подсказки свертстал сайт с gulp/sass, одна проблема без gulp не отбражтся сайт как нужно, это так задуманно? Если да то как его...

Webpack vs gulp
что может делать вебпак, что не может галп?

Не срабатывает gulp
У меня не срабатывает автоматическое изменение файла css при использовании gulp, а именно его минифицирование. Вот код, который лежит в...

Gulp.parallel
Добрый вечер! Сразу к вопросу. Есть такая конструкция №1 gulp 3, что она делает не так важно. Пример взят в сети из статьи по обучению...

Gulp/babel/polyfill
Товарищи! Промучился два дня, облазил, в т.ч. англоязычные, форумы, вкуривал документацию по babel, и понял, что сам разобраться не могу. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru