NPM Scripts -- onchange parallelshell
- Watch for changes to the styles.scss file and automatically compile it to the css file.
- Run multiple NPM scripts in parallel using parallelshell NPM module.
Watching for Changes and Parallelshell
- First, we install two NPM packages onchange and parallelshell as follows:
npm install --save-dev onchange@3.3.0 parallelshell@3.0.2
- Then, add the following two script items to package.json if you are doing the exercise on a MacOS computer or a Linux computer:
"watch:scss": "onchange \"css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\""
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\"\"npm run lite\""
},
NPM Scripts Part 1
Objectives and Outcomes
In this exercise, you will learn to set up NPM scripts by modifying the package.json file. At the end of this exercise, you will be able to:
- Watch for changes to the styles.scss file and automatically compile it to the css file.
- Run multiple NPM scripts in parallel using parallelshell NPM module.
Moving JS to Script file
- Create a folder named js and in that folder create a file named scripts.js.
- Open index.html and from this file cut out all the JQuery script that we added to it and move the code to the scripts.jsfile that we created above.
- Then, update the index.html file to include the scripts.js file by adding the following line:
- Add the same line to the scripts block in aboutus.html and contactus.html:
Watching for Changes and Parallelshell
- First, we install two NPM packages onchange and parallelshell as follows:
- Then, add the following two script items to package.json if you are doing the exercise on a MacOS computer or a Linux computer:
- NOTE: If you are doing the exercise on a Windows computer, please use the following two script items instead of the above:
- You will also update the start script as follows:
- Then, type the following at the prompt to start watching for changes to the SCSS file, compile it to CSS, and run the server:
