Объединить несколько 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
Отпишитесь в комментах, получилось или нет
РЕКЛАМА от Яндекса. Может быть недоступна в вашем регионе
Конец рекламы. Если там пусто считайте это рекламой моей телеги