Сборка проекта PostCSS

Заключительная статья про PostCSS, а именно сбора проекта и получение готового CSS.

Вы уже прочли все статьи:

Самое время получить готовый CSS.

Процесс сборки

В папке srcбудут находиться исходные .css файлы для компиляции.

В консоли Node.js command prompt нужно перейдите в папку своего проекта ( как? ) и ввести команду: gulp css.

После чего в папке dest получите готовые обработанные *.css.

Если вы отредактировали исходные файлы, нужно заново выполнить команду сборки.

Практика

В папке src создайте файл example.css с содержимым:

/* Тестирование PostCSS */ 

:root {
--color: blue;
}

.style {
    display: flex;
    color: var(--color);
    font-size: 16px;
}

.wrap {
    width: 100px;
}

Далее в консоли введите команду gulp css. В папке dest будет файл с готовым содержимым:

._style_1qrey_15{display:-webkit-box;display:-ms-flexbox;display:flex;color:blue;font-size:1em}._wrap_1qrey_27{width:6.25em}

Автоматическая сборка

Для того что бы каждый раз не писать команду сборки, можно поставить на отслеживания все файлы .css в папке src, после чего каждый раз при редактировании, команда сборки будет выполняться автоматически.

Для реализации этого способа в вашем файле gulpfile.js в конец добавьте следующий код:

gulp.task('watch', function() {
    gulp.watch('./src/*.css', ['css']);
});

Далее нужно запустить отслеживание, в консоль пропишите gulp watch. Теперь консоль перейдёт в режим выполнения задачи, а Gulp будет отслеживать изменения. Что-бы выйти из этого режима нажмите CTRL+C.

Комментарии - 0
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Хостинг от uCoz