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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>