Всем привет! В этом материале мы продолжим рассматривать PostCSS , установим его и начнем использовать вместе с Gulp .
Всем привет! В этом материале мы продолжим рассматривать PostCSS, установим его и начнем использовать вместе с Gulp.
PostCSS можно использовать с Grunt, WebPack, Broccoli, Brunch, ENB и т.д. Мы же будем использовать Gulp.
На самом деле, если вы уже использовали какие-нибудь системы сборки, то вы, наверняка, также использовали и PostCSS, даже не подозревая об этом. Вспомните, вы подключали плагины, которые, например, добавляли в нужных местах префиксы? Думаю, да. Это и был PostCSS.
Кстати, Stylus также хорошо работает с этой технологией. Но мы выбрали Gulp, так что давайте начнем разбирать PostCSS на его примере.
Чтобы установить PostCSS для Gulp, вы можете ввести команду в терминале:
npm install --save-dev gulp-postcss
Теперь подключите PostCSS в файле gulpfile.js.
var postcss = require('gulp-postcss');
var csswring = require('csswring');
Добавьте в задачи следующее:
gulp.task('styles', function() {
var processors = [
csswring
];
return gulp.src('styles.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
В терминале введите следующую команду:
npm install --save-dev csswring
В переменной processors мы пишем все нужные нам плагины, например, тот же autoprefixer будет записан так же там. Ее же мы передаем в функцию postcss.
Теперь в терминале напишем код для компиляции:
gulp styles
В папке dest появится скомпилированный CSS код.
Итак, на этом пока все. Мы установили и даже запустили PostCSS, а в следующей статье рассмотрим, как его использовать более эффективно.
Спасибо за внимание!
