NPM Scripts 2 -- rimraf copyfiles imagemin usemin htmlmin uglifyjs

Posted 无处安放的灵魂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了NPM Scripts 2 -- rimraf copyfiles imagemin usemin htmlmin uglifyjs相关的知识，希望对你有一定的参考价值。

 

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:

 
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 be copied to the distribution folder. To help us do this, install the copyfiles NPM module globally as follows:
 
npm -g install [email protected]2.0.0
 
 
 

Remember to use 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 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

 
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 do not want the dist folder to be checked into the git repository.

 
 
node_modules
dist
 
 
 
  • 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 two 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 src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script 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, you can type the following at the prompt:

 
 
npm run build
 
 
 
  • 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.

 

"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\"",
"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/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 copyfonts && npm run imagemin && npm run usemin"
},
 

以上是关于NPM Scripts 2 -- rimraf copyfiles imagemin usemin htmlmin uglifyjs的主要内容，如果未能解决你的问题，请参考以下文章

rimraf 跨平台删除文件

npm build 给出“接近堆限制分配失败的无效标记压缩”

rimraf node_modules 快速删除

rimraf --A deep deletion module for node (like `rm -rf`)

npm scripts

vue组件库用@vue/cli构建typescript版UI库 -安装常用npm包配置脚本