Gulp файл и сборка CSS
Что такое Gulp, и зачем он нужен? При верстке сайтов, возникает много рутинных задач:
- компиляция SASS/LESS файлов
- работа с шаблонизаторами
- проставление префиксов
- оптимизация изображений
- сжатие и склейка файлов
Представьте, что вы сверстали сайт и на этом работа ещё далеко не закончилась. Дальше вы открываете массу сервисов, генераторов, компиляторов и вручную начинаете дорабатывать ваш сайт. Трата драгоценного времени, на повторяющиеся действия из проекта в проект - непозволительная роскошь.
Наверняка вас посещала такая мысль: "Как бы это все это автоматизировать". А все уже давно придумано за нас, только бери и пользуйся. В народе называют его сборщиком проектов – Gulp, а по сути – это исполнитель задач (task-runner).
Кстати, как у вас обстоит дело с JavaScript? При работе с Gulp файлом, вам придется с ним подружиться, но ненадолго. Как правило, файл с Gulp тасками (task), создается один раз и копируется из проекта в проект.
На этом уроке мы рассмотрим, как создать gulp task для сборки CSS файла. На компьютере должен быть установлены node.js.
Задача: Пишем стили в SASS, а на выходе получаем простой и минифицированный CSS файл с проставленными префиксами.
Gulp проект
Создаем папку my-gulp с файлом package.json. Пишем информацию о проекте.
{
"name": "my-gulp",
"version": "1.0.0",
"description": "gulp4",
"author": "дядя Вася",
}
Устанавливаем Gulp, через командную строку:
npm i -–save-dev gulp
В папке с проектом появилась папка node_modules, на неё не обращайте никакого внимания.
Создадим в проекте:
- gulpfile.js
- две папки src, dist
- style.scss
Gulp плагины
Установим плагины, поочередно вводя в командную строку:
// компилирует SASS в CSS
npm i gulp-sass --save-dev
// проставляет префиксы
npm i gulp-autoprefixer --save-dev
// делает красивый CSS код
npm i gulp-cssbeautify --save-dev
// сжимает CSS файл
npm i gulp-cssnano --save-dev
// удаляет комментарии
npm i gulp-strip-css-comments --save-dev
// добавляет суффикс min к сжатой версии
npm i gulp-rename --save-dev
Дословно: Инсталлировать gulp модули из пакетного менеджера и сохранить зависимости в package.json.
Пример Gulp файла для сборки CSS
// подключаем gulp
const gulp = require ("gulp");
// создадим две переменные, отвечающие за чтение исходных файлов (src) и запись сгенерированных файлов (dest).
const {src, dest} = require ("gulp");
// передаем модули в переменные
const autoprefixer = require ("gulp-autoprefixer");
const cssbeautify = require ("gulp-cssbeautify");
const removeComments = require ("gulp-strip-css-comments");
const rename = require ("gulp-rename");
const sass = require ("gulp-sass");
const cssnano = require ("gulp-cssnano");
Мы пишем SASS код в файле style.scss, Gulp выполняет таски и складывает готовые style.css + style.min.css, в папку dist. Однако сам Gulp не знает, откуда брать и куда перемещать, надо указать пути.
Создадим объект path с двумя вложенными объектами. Готовый CSS код, будет перемещаться из папки src в папку dist.
var path = {
build: {
css: "dist/"
},
src: {
css: "src/style.scss",
}
Создаем Gulp task для CSS
В таске важно придерживаться логической последовательности. Получаем путь ко всем исходным SASS файлам. Метод pipe будет вызывать ранее установленные плагины, можно передавать параметры.
Компилируем SASS файлы в CSS
Расставляем префиксы в каскадном виде с учетом 8-ми последних версий браузеров.
function css (){
return src(path.src.css, {base: "src/"})
.pipe(sass())
.pipe(autoprefixer({
Browserslist: ['last 8 versions'],
cascade: true
}))
Преобразует код к аккуратному виду. Перемещает готовый CSS код туда, куда мы указывали в путях. Удаляет пробелы, комментарии, создает два CSS файла, один из которых минифицированный. Делает экспорт.
.pipe(cssbeautify())
.pipe(dest(path.build.css))
.pipe(cssnano({
zindex: false,
discardComments: {
removeAll: true
}
}))
.pipe(removeComments())
.pipe(rename({
suffix: ".min",
extname: ".css"
}))
.pipe(dest(path.build.css))
}
exports.css = css;
Помимо таска для сборки CSS, в gulpfile.js пишутся таски для html, js и изображений.
-
Создано 09.09.2019 10:04:26
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.