Our Thoughts
Anonymous
03 June, 2021
3 MIN READ

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?

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

npm install

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

gulp build:CSS


Script for JavaScript

Our frontend build tool uses ES6 for managing javascript with the 'Drupal.behaviors' code standard.

gulp build:CSS


Linting JS and CSS

Linting Javascript and CSS files along with fixing Linting errors & formatting.

Script to lint JS:

gulp lint:js

Script to fix JavaScript errors & format JS file:

gulp js-fix-prettier

Script to lint CSS:

gulp lint:css

Script to fix CSS linting errors:

gulp lint:css-fix


Image optimization

The images designated for the custom theme can be placed in the images/ folder. We have a gulp task to optimize images.

gulp 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

OR

gulp watch:css

 

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 - https://github.com/qed42/gulp-postcss.

Thank you for reading!

 

Anonymous