Adding PostCSS To Your Workflow
Because PostCSS is written in JavaScript, we can use task runners like Gulpand Grunt to transform the CSS in our projects. The tutorial below demonstrates how to incorporate PostCSS in your workflow via either Gulp or Grunt. Using one tool over the other is not crucial and is simply a matter of personal preference or what’s best for the project.
Note: A complete version of both the Gulp and Grunt versions of the tool isavailable on GitHub. Feel free to use it as a starter template and to expand on it as needed.
SETTING UP POSTCSS WITH GULP
If you are unfamiliar with Gulp, I’d recommend reading “Building With Gulp” by Callum Macrae to get up and running with the tool.
To install the PostCSS module in your project, run the following command in your terminal: npm i gulp-postcss -D.
In your project’s Gulpfile.js, we need to require our installed PostCSS module and then use it within a task. Be sure to update the paths to your development files and the directory where the transformed output will go.