NPM watch changes

Node.js is a great framework. But sometimes you need to have a fast preview of your changes in the distribution version. It’s all about setting your package.json file.

First let’s create directory structure and install some dependencies:

mkdir exmaple
cd example
mkdir -p src/js
touch src/js/app.js
mkdir -p src/css
touch src/css/app.scss
mkdir -p dist/css
mkdir dist/js

npm init
npm install sass -g
npm install node-sass -g
npm install browserify -g
npm install watchify -g

Now having your package.json add or update a section:

"scripts": {
    "start": "node app.js",
    "watch-sass": "node-sass --watch src/css/*.scss -o dist/css/",
    "watch-js": "watchify src/js/app.js -o dist/js/app.js -dv",
    "watch": "npm run watch-sass & npm run watch-js",
    "build-js": "browserify src/js/app.js | uglifyjs -mc > dist/js/app.js",
    "build-sass": "node-sass src/css/app.scss -o dist/css/app.css --output-style compressed",
    "build": "npm run build-sass & npm run build-js"

Simple command

npm run watch

will make your day.

Now change your /src/css/app.scss file, save it and check the /dist/css/app.css file.