Browsing Category

Front-end Develop

Front-end Develop

Using NPM as a Build Tool

December 1, 2017

You probably already know about the following build tools Bower, Grunt or Gulp in the ecosystem tools for Front-end Development environment.
From the birth of Bootstrap 4, Bower is no longer supported by the Bootstrap team. This action is in line with current trend when NPM is getting better and better. It can fulfill two functions: Package Management (replaces Bower) and Build Tool (replaces Gulp and Grunt).
Within this blog post, we will approach the concept of using NPM as a build tool.
The drawbacks of Grunt or Gulp:
• Gulp and Grunt tools are built upon the core libraries/kits from NPM
• These tools are not updated immediately…
• Don’t have full tools/kits like the original NPM
• Generate unnecessary errors
Here, I will explain some basic tasks to illustrate how to use NPM as build tool through NPM scripts.
First, we need to install the following packages:
postcss-cli – http://postcss.org/

npm install postcss-cli –save-dev

Autoprefixer – automatically add prefixes for CSS3, which load data from Can I Use. It’s a plugin of PostCSS

npm install autoprefixer –save-dev

node-sass – compile SCSS into CSS

npm install node-sass –save-dev

npm-run-all – help to run multiple NPM scripts at the same time

npm install npm-run-all –save-dev
Once installed these Dependencies, add these value to the scripts:
“devDependencies”: {
“autoprefixer”: “^7.1.6”,
“node-sass”: “^4.5.3”,
“npm-run-all”: “^4.1.1”,
“postcss-cli”: “^4.1.1”,
},
“scripts”: {
“autoprefixer”: “postcss -u autoprefixer -r build/css/*”,
“scss”: “node-sass –output-style compressed -o build/css scss/styles.scss”,
“build:css”: “run-s scss autoprefixer”,
“build”: “run-s build:*”
}

As you see in the JSON snippet above, each value of NPM Scripts corresponds to a statement when executing on Shell.
Please note that run-s and run-p are abbreviation from npm-run-all commands, run-s runs inside the scripts, while run-p runs outside the Parallel.

Run this command after completing the setup of Dependencies and package.json
npm run build

The successful messages will show up on Shell
> demo-tutorial@1.0.0 build D:\xampp\htdocs\demo-tutorial
> run-s build:*

> demo-tutorial@1.0.0 build:css D:\xampp\htdocs\demo-tutorial
> run-s scss autoprefixer

> demo-tutorial@1.0.0 scss D:\xampp\htdocs\demo-tutorial
> node-sass –output-style compressed -o build/css scss/styles.scss

Rendering Complete, saving .css file…
Wrote CSS to D:\xampp\htdocs\demo-tutorial\build\css\styles.css

> demo-tutorial@1.0.0 autoprefixer D:\xampp\htdocs\demo-tutorial
> postcss -u autoprefixer -r build/css/*

√ Finished build\css\styles.css (124 ms)
This article provided you basic manipulation which is compiling SCSS. Next, we will deal with more commands to ensure NPM is as powerful as any Build tools.