NODE JS | Compile Sass

October 25th, 2017

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
  • First, 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.