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.