Объединить несколько css файлов в один с помощью Gulp

Содержание
Введение
Пример
Похожие статьи

Введение

Это простой пример без наворотов. Для выполнения кода, нужно сперва установить nodejs и Gulp 4 .

Сделать это довольно просто. Советую прочитать статьи nodejs и Gulp 4

Пример

Предположим что мы находимся в папке с проектом.

Внутри этой папки есть папка css , в которой лежат разные .css файлы

Наша цель собрать всё в один файл new_style.css и положить в папку new.

Также я предлагаю сжать всё с помощью clean-css и пройтись autoprefixer-ом из PostCSS

Если хотите, можете ещё добавить .pipe(uglify())

В папке с проектом нужно создать файл gulpfile.js и вставить туда следующий код

const gulp = require('gulp'); const postcss = require('gulp-postcss'); const autoprefixer = require('autoprefixer'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat'); const cleancss = require('gulp-clean-css'); gulp.task('default', function(done) { console.log("Gulp is running!"); done(); }); gulp.task ('styles', function(done) { console.log("style is running!"); return gulp.src('./css/*.css') .pipe(postcss([autoprefixer])) .pipe(cleancss()) .pipe(concat('new_style.css')) .pipe(gulp.dest('new')) done(); } );

За объёдинение .css файлов отвечает таск styles

Чтобы запустить этот скрипт выполните

gulp styles

Если вы вдруг забудете название таска, который написали - всегда можно узнать список всех доступных тасков выполнив

gulp --tasks

Отпишитесь в комментах, получилось или нет

Похожие статьи
Gulp
Объединить и сжать несколько css файлов в один
Отправить файлы по ftp с помощью Gulp
Gulp series
Обработка только изменённых файлов с помощью gulp.watch().on('change')
Как скопировать папку с помощью Gulp
Видеоуроки Gulp
JavaScript
NodeJS
NPM
Web

РЕКЛАМА от Яндекса. Может быть недоступна в вашем регионе

Конец рекламы. Если там пусто считайте это рекламой моей телеги

Поиск по сайту

Подпишитесь на Telegram канал @aofeed чтобы следить за выходом новых статей и обновлением старых

Перейти на канал

@aofeed

Задать вопрос в Телеграм-группе

@aofeedchat

Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@urn.su если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящую по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети: