NODE JS | Compile Sass
HI, i’m lazy, so, till now, i had compiled my .less / .scss / or .sass by using “Koala”, a GUI application for Less, Sass, Compass and CoffeeScript compilation, but now ( under pressure off my colleague ), i want to pass to Node.js compiler.
The goals are a lot, it’s fast, it’s secure, don’t need another application to download and install, and last but not list , you can use it in Visual code studio Terminal.
So let’s go:
- First, download node.js from this link : Node.js
- Install it form node.js installer
- Colone “NPM Scripts as Task Runner” from GitHub, in your project folder
- Install by typing in terminal “np install”
If you open the cloned folder, you see serveral files
Open “package.json”
{ "name": "npm-scripts", "version": "1.0.0", "description": "NPM Scripts as task runners", "main": "index.js", "scripts": { "scss": "node-sass styles -o dist/css --output-style compressed", "autoprefixer": "postcss -u autoprefixer -r dist/css/*", "build:css": "npm run scss && npm run autoprefixer", "watch:css": "onchange 'styles/*.scss' -- npm run build:css", "serve": "browser-sync start --server ./ --port 3000 --files './*.html, dist/css/*.css', js/*.js", "watch": "parallelshell \"npm run serve\" \"npm run watch:css\"", "postinstall": "npm run watch" }, "author": "Paolo Duzioni", "license": "MIT", "devDependencies": { "autoprefixer": "^7.1.2", "browser-sync": "^2.18.13", "node-sass": "^4.5.3", "onchange": "^3.2.1", "parallelshell": "^3.0.1", "postcss-cli": "^4.1.0" } }
In “”scripts” you see that was installed ” SCSS Compiler, Autoprefixer, Browser Sync “.
Open Terminal and add “npm install”, you see that in terminal starts the “node” installation process.
When had finish, you see that “[Browsersync] Serving files from: ./ [Browsersync] Watching files… “, that mean Browsersync is up and running.
If all it’s right, a browser window opens with your project folder.