gruntjs - The easiest way to use autoprefixer? -


what want have tool can watch , auto prefix css. using pleeease.io, straightforward beginners me, after install through npm, need create option file(.pleeeaserc),

pleeease watch 

afterwards, can focus on css, every time make change css file, gets processed , output.

unfortunately seems author has stopped maintaining it, when

npm install pleeease 

on new server got lots of errors , installation failed.

i guess time me learn how directly use autoprefixer, believe pleeease integrates 1 of dependencies.

however, find learning curve little me: use autoprefixer, need learn postcss; , postcss runs grunt or gulp; use task runners, need know npm , node.js. know these useful tools can save lots of time, them can more autoprefixing. make deep dive them later under current pressure need shortcut pleeease autoprefixer , running, without having digest documents , articles postcss. hope can

[postcss|autoprefixer|something else] watch 

under scss folder , every time make change , save input.scss, output.scss file generated.

so have questions, in part of effort on learning postcss and/or getting autoprefixer work easy possible:

1) clarify, relationship between postcss , postcss-cli? latter depend on or include former?

2) , installing latter merely enable ability use postcss command in command-line interface?

3) did npm install -g postcss-cli still can't use postcss command, did wrong?

4) watch file change , automatically compile, need use task runners grunt or gulp along postcss?

5) difference between npm install postcss , npm install grunt-postcss?

"what want have tool can watch , auto prefix css."

yes can gulp, can , running in minutes. there plenty of "getting started" walkthroughs online. don't need know postcss use autoprefixer. task below compile sass, run autoprefixer , output corresponding css file anytime save .scss file:

gulpfile.js

    var gulp = require('gulp'),         $ = require('gulp-load-plugins')();       gulp.task('watch', () => {         gulp.watch('src/**/*.scss', ['sass']);     });      gulp.task('sass', () => {         return gulp.src('src/**/*.scss')             .pipe($.sass())             .pipe($.autoprefixer())             .pipe(gulp.dest('dest'));     }); 

Comments

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -