Zheleznov
@Zheleznov

Как компилировать свой css файл для каждой страницы в Gulp?

Добрый день, всем!
Подскажите пожалуйста как правильно настроить gulp?

Нужно чтобы например для:
- главной страницы был файл - style.min.css
- страницы магазина - style-shop.min.css

Для главной страницы импортом подтягивается слишком много файлов стилей, которые в магазине не нужны...

gulpfile.js выглядит так
Посмотреть код

let path = {
    build: {
        css: project_folder + "/css/",
    },
    src: {
        css: source_folder + "/scss/style.scss",
    },
    watch: {
        css: source_folder + "/scss/**/*.scss",
    },
    clean: "./" + project_folder + "/"
}

function css() {
    return src(path.src.css) 
    .pipe (
        scss({
            outputStyle: "expanded"
        })
    )
    .pipe (
        group_media()
    )
    .pipe(
        autoprefixer({
            overrideBrowserslist: ["last 5 version"],
            cascade: true
        })
    )
    .pipe(webpcss())
    .pipe(dest(path.build.css))
    .pipe(clean_css())
    .pipe(
        rename({
            extname: ".min.css"
        })
    )
    .pipe(dest(path.build.css))
    .pipe(browsersync.stream())
}


Не могу сообразить как правильно будет, не писать же ещё одну функцию такую же только для другого файла.. а если таких файлов 20 будет..
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
RomanTRS
@RomanTRS
Передавайте в SRC не конкретный файл, а glob-шаблон, указывающий на несколько файлов сразу.

let path = {
    ..
    src: {
        css: source_folder + "/scss/*.scss",
    },
    ..
}

При этом, каждый файл, будет собирать отдельно и как он там изначально называется значения не имеет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы