Установка і настройка postcss.

Відео: Оновлення сторінки HTML і CSS. Установка BrowserSync і node.js

Всім привіт! У цій статті ми продовжимо розглядати PostCSS, встановимо його і почнемо використовувати разом з Gulp.

PostCSS можна використовувати з Grunt, WebPack, Broccoli, Brunch, ENB і т.д. Ми ж будемо використовувати Gulp.

Відео: PostCSS Tutorials

Насправді, якщо ви вже використовували якісь системи збирання, то ви, напевно, також використовували і 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.