Объединить и минифицировать несколько 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

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

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