NPM Scripts part 2Objectives and Outcomes
In this exercise you'll learn to build a distribution folder containing the files that can is deployed on a Web server H Osting your project. This distribution folder would is built from your project files using various NPM packages and scripts. At the end of this exercise, you'll be able to:
- A folder using the Clean NPM module.
- Copy files from one folder to another
- Prepare a minified and concatenated CSS file from all the CSS files used in your project
- Prepare an uglified and concatenated JS file containing all the JS code used in your project
Cleaning up a distribution Folder
- Install the rimraf npm module by typing the following at the prompt:
npm Install --save-Dev [email protected]2.6.2
- Then, set up the following script:
"Clean ": "Rimraf Dist", Copying Fonts
- Your Project uses Font-awesome fonts. These need to being copied to the distribution folder. To help us does this, install the copyfiles NPM module globally as follows:
NPM -g install [email protected]2.0.0
Remember to the use of sudo on Mac and Linux.
- Then set up the following script:
" copyfonts": "copyfiles-f node_modules/font-awesome/fonts/* dist/fonts",
Compressing and minifying Images
- We Use the imagemin-cli NPM module to help us to compress our images to reduce the size of the images being used In our project. Install the imagemin-cli module as follows:
NPM -g install imagemin-[email protected]3.0.0
Remember to the use of sudo on Mac and Linux. Note: Some students has encountered issues with IMAGEMIN-CLI not installing it plugins due to issues with global permissions O N Mac. In the case try
sudo npm install -g imagemin-[email protected]3.0.0 --unsafe- Perm=True --allow-root
- Then set up the following script:
" imagemin": "imagemin img/*-o dist/img", Preparing the distribution Folder
- Open . Gitignore and update it as follows. We don't want the Dist folder to being checked into the Git repository.
Node_modulesDist
- Then, install the usemin-cli, Cssmin, Uglifyjs and htmlmin NPM packages as follows:
npm Install- -save-Dev usemin-[email protected]0.5.1 [email protected] 0.4.3 [email protected]2.4.11 [email protected]0.0 . 7
- Add The following scripts to the Package.json file:
"Usemin": "usemin contactus.html-d dist--htmlmin-o dist/contactus.html && usemin aboutus.html-d Dist--htmlmin-o dist/aboutus.html && usemin Index. html-d Dist--htmlmin-o dist/index.html ","Build": "npm run clean && npm run imagemin && npm run copyfonts && npm run usemin "
- Open index.html and surround the CSS links inclusion code as follows:
<!--build:css css/main.css -- <link rel="stylesheet" href="node_modules/bootstrap/dist/css/ Bootstrap.min . css "> <link rel="stylesheet" href="node_modules/font-awesome/css/ Font-awesome.min . css "> <link rel="stylesheet" href="node_modules/bootstrap-social/ Bootstrap-social . css "> <link href="css/styles.css" rel="stylesheet"> <!--endbuild --
- Do the same change in aboutus.html and contactus.html
- Similarly, open index.html and surround the JS script inclusion code as follows:
<!--build:js js/main.js -- <script Span class= "ace_entity ace_other ace_attribute-name ace_xml" >src=" node_modules/jquery/dist/ Jquery.slim.min.js "></script> <script Span class= "ace_entity ace_other ace_attribute-name ace_xml" >src=" node_modules/popper.js/dist/ Umd/popper.min.js "></script> <script Span class= "ace_entity ace_other ace_attribute-name ace_xml" >src=" Node_modules/bootstrap/dist/js /bootstrap.min.js "></script> <script src="Js/scripts.js"></script> <!--endbuild --
- Do the same change in aboutus.html and contactus.html
- To build the distribution folder, your can type the following at the prompt:
NPM Run build
- This would build the Dist folder containing the files that is a self-contained version of your project. You can now copy the contents of this folder to a Web server that hosts your website.
- After verifying then the Dist folder is built correctly and you can now does a git commit with the message "NPM Scripts Part 2"
Conclusions
In this exercise, you learnt the various steps to build the project for deployment using NPM scripts.
"Scripts": {"Start": "NPM Run Watch:all", "Test": "Echo \" Error:no test specified\ "&& exit 1", "Lite": "Lite-serve R "," Scss ":" Node-sass-o css/css/"," Watch:scss ":" onchange \ "Css/*.scss\"--NPM run Scss "," Watch:all ":" Parallelshell \ " NPM run Watch:scss\ "\" npm run Lite\ "", "clean": "Rimraf Dist", "copyfonts": "Copyfiles-f node_modules/font-awesome/fonts /* dist/fonts "," Imagemin ":" Imagemin img/*-o dist/img "," Usemin ":" Usemin contactus.html-d Dist--htmlmin-o dist/contact us.html && usemin aboutus.html-d Dist--htmlmin-o dist/aboutus.html && usemin index.html-d Dist--HTMLM In-o dist/index.html "," Build ":" NPM run clean && npm run copyfonts && npm run imagemin && NPM run Usemin "}, Additional Resources
- Why NPM Scripts?
- How to use NPM as a Build Tool
- The Command line for Web Design
NPM Modules
- OnChange
- Parallelshell
- Rimraf
- CopyFiles
- Imagemin-cli
- Usemin-cli
- Cssmin
- Uglifyjs
- Htmlmin
NPM Scripts 2--Rimraf CopyFiles imagemin usemin htmlmin uglifyjs
