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.