Frontend build tool with PostCSS and Gulp
Frontend build tools can save a lot of valuable time and make a frontend developers life much easier. They can do almost anything: download libraries, run tests, bundle packages, automatize tasks, and so much more. Lately, PostCSS and Gulp v4 are the talks of the town when it comes to the frontend side of web development. To ride this wave, we've built a frontend build tool coupling PostCSS and Gulp. This frontend build too essentially helps with frontend tasks such as compiling, linting & image optimization. Let's dive into how we built this frontend build tool!
What is PostCSS?
What is Gulp?
Pre-requisites for using the tool
Ensure that you are using the latest LTS release of Node.js. Start by installing and running Node.js.
To install the required packages, use
Now that the pre-requisites are in order, let’s take a look at some of the features of this tool categorized by the front-end tasks.
Features and functionalities of our frontend build tool
- The tool uses PostCSS for managing variables and provides the needed browser support
- With the extension .css, we can use SCSS/PostCSS syntax or it's features
- The tool provides partial file support like SASS and nested CSS support like SASS
- We included the RTL feature which converts LTR CSS to RTL for directional CSS
- The tool provides the BEM classes feature too
- You can define your Placeholder and @extend it, for example, src/css/utils/_placeholders.css. Here's how to use a placeholder - src/css/components/navbar.css. For more details on how to use a placeholder visit - https://github.com/csstools/postcss-extend-rule.
- Our tool also facilitates PX to REM conversion. The default base for conversion is 1rem = 16px and the default output unit for <value>px is rem. For more information visit - https://www.npmjs.com/package/postcss-pixels-to-rem
- The tool provides media query breakpoints for mobile/iPad/desktop devices, for example - src/css/utils/_breakpoints.css. Here's how to use the media query breakpoints - src/css/components/header.css
- The tool also comprises CleanCSS & Auto-prefixer
Script for CSS
Linting JS and CSS
Script to lint JS:
Script to lint CSS:
Script to fix CSS linting errors:
The images designated for the custom theme can be placed in the images/ folder. We have a gulp task to optimize images.
Run multiple tasks
Run multiple tasks at one time. Like build/compile CSS, JS & optimise images.
npm run build
Continuous file watch:
npm run watch
Our frontend build tool makes frontend developers life easier by assisting in frontend tasks such as compiling, linting & image optimization. Check out our frontend build tool here - https://github.com/qed42/gulp-postcss.
Thank you for reading!