How to use PostCSS with gulp
Today I will explain how to use PostCSS with gulp.
What is Gulp
Automate and enhance your workflow qt: Official page
In other words, it automates the work and makes it efficient. Although I was aware that it was a tool that automates the tasks around the front end somehow it was the first time to actually use it.
It is required that Node.js and npm are already installed on your develop environment. I think that it is better to proceed with installation by checking the official documentation.
How to use PostCSS
This time I will use the following in PostCSS.
- autoprefixer => Automatically grant vendor prefix
- cssnext => Transform the CSS notation that the browser is not yet implemented at the present stage so that the current browser can interpret it
- postcss-nested => You can write CSS nested
- postcss-mixins => to use mixins
- postcss-simple-vars => CSS makes variables available
- cssnano => CSS will be reduced except for spaces and line breaks
They need to install the module by using npm.
To set up gulpfile.js
I set up gulpfile.js like following.
I will execute for the css file of this path.
src/**/*.css
The content of css file is following.
After running gulp
When nesting and variables become available we can describe CSS considerably comfortably. Also it is very pleasant to attach vendor prefix automatically. It seems to be good even if you do not investigate every time at [CanIuse] (http://caniuse.com/). In addition to gulp you can monitor files with watch to automatically execute tasks, livereload etc. using gulp - webserver, and so on. Gulp that handles troublesome processing easily is the best.