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?
PostCSS is a tool that gives access to a bunch of CSS related plugins to help improve the workflow and writing CSS. This enables a developer to start with a blank slate and select the additional plugins as required. If you are familiar with JavaScript tooling, then you can think of PostCSS as Babel for CSS.
What is Gulp?
Gulp is a JavaScript toolkit that helps in implementing multiple front end tasks during web development. Gulp is one of the most popular build tools that help with several tasks when it comes to web development.
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 - 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 - 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
Script for JavaScript
Our frontend build tool uses ES6 for managing javascript with the 'Drupal.behaviors' code standard.
Linting JS and CSS
Linting Javascript and CSS files along with fixing Linting errors & formatting.
Script to lint JS:
Script to fix JavaScript errors & format JS file:
Script to lint CSS:
Script to fix CSS linting errors:
Image optimization
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.
Continuous file watch:
OR
Conclusion
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 - gulp-postcss.
Thank you for reading!