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:

1

 

 

 

<scriptsrc="js/scripts.js"></script>

 

 

 

• 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:

1

 

 

 

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:

1

2

 

 

 

"watch:scss": "onchange 'css/*.scss' -- npm run scss",

"watch:all": "parallelshell 'npm run watch:scss' 'npm run lite'"

 

 

 

• NOTE: If you are doing the exercise on a Windows computer, please use the following two script items instead of the above:

1

2

 

 

 

"watch:scss": "onchange \"css/*.scss\" -- npm run scss",

"watch:all": "parallelshell \"npm run watch:scss\"\"npm run lite\""

 

 

 

• You will also update the start script as follows:

1

 

 

 

"start": "npm run watch:all",

 

 

 

• Then, type the following at the prompt to start watching for changes to the SCSS file, compile it to CSS, and run the server:

1

 

 

 

npm start