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

Введение

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

Сделать это довольно просто, можете сперва прочитать статьи nodejs и Gulp 4

Пример

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

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

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

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

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

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

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(); } );

Если остались вопросы - смело задавайте их в комментариях.

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

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