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
> [email protected] build D:\xampp\htdocs\demo-tutorial
> run-s build:*
> [email protected] build:css D:\xampp\htdocs\demo-tutorial
> run-s scss autoprefixer
> [email protected] 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
> [email protected] 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.