标签：lan   red   iss   data-   The   ext   sem   another   sed   

NPM Scripts Part 2

Objectives and Outcomes

In this exercise you will learn to build a distribution folder containing the files that can be deployed on a web server hosting your project. This distribution folder would be built from your project files using various NPM packages and scripts. At the end of this exercise, you will be able to:

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

• Then, set up the following script:

Copying Fonts

• Your project uses font-awesome fonts. These need to be copied to the distribution folder. To help us do this, install the copyfiles NPM module globally as follows:

Remember to use sudo on mac and Linux.

• Then set up the following script:

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:

Remember to use sudo on mac and Linux. NOTE: Some students have encountered issues with imagemin-cli not installing its plugins due to issues with global permissions on Mac. In that case try

• Then set up the following script:

Preparing the Distribution Folder

• Open .gitignore and update it as follows. We do not want the dist folder to be checked into the git repository.

• Then, install the usemin-cli, cssmin, uglifyjs and htmlmin NPM packages as follows:

• Add the following two scripts to the package.json file:

• Open index.html and surround the css links inclusion code as follows:

• Do the same change in aboutus.html and contactus.html
• Similarly, open index.html and surround the js script inclusion code as follows:

• Do the same change in aboutus.html and contactus.html
• To build the distribution folder, you can type the following at the prompt:

• This will build the dist folder containing the files that are 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 that the dist folder is built correctly, you can now do 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.

NPM Scripts 2 -- rimraf copyfiles imagemin usemin htmlmin uglifyjs

标签：lan   red   iss   data-   The   ext   sem   another   sed   

原文地址：https://www.cnblogs.com/marcocao/p/9083047.html