Объединить несколько 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

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