如何将 PurgeCSS 与 Angular CLI 项目集成 [英] How to integrate PurgeCSS with Angular CLI project

问题描述

我有一个使用 Angular CLI 创建的 Angular 项目，所以我有 angular.json 文件用于配置构建.

我想集成 PurgeCSS，因为它似乎是减少 CSS 包大小的好工具.

在 PurgeCSS 网站上，他们解释了如何与 Webpack 集成.我找到了一个教程，解释了如何添加 自定义 webpack 与 Angular CLI 的集成.>

有没有人有 PurgeCSS 与 Angular CLI 项目集成的成功例子?

解决方案

我创建了这个 bash 脚本来在我的 Angular 应用程序中使用 PurgeCSS.它将我的styles.css"文件大小从 63kb 减少到只有 3kb！希望它也适用于您.

步骤:

1. 在项目文件夹中创建一个名为 purgecss.sh 的新文件
2. 将下面的代码插入purgecss.sh文件
3. 从 CLI 运行 ./purgecss.sh

#!/bin/bash# 运行生产构建ng build --prod --output-hashing 无# 转到 dist/yourProjectName 文件夹cd ./dist/yourProjectName# 创建一个名为 'css' 的新目录(你可以任意命名)mkdir css# 运行 PurgeCSS &在css"目录中创建一个新的.css"文件purgecss --css ./styles.css --content ./index.html ./*.js --out ./css# 将 'dist/yourProjectName/styles.css' 文件替换为 'dist/yourProjectName/css/styles.css' 文件mv ./css/styles.css ./styles.css# 删除之前创建的 'css' 目录rm -r css

I have an Angular project created with Angular CLI, so I have angular.json file for configuring the build.

I wanted to integrate PurgeCSS as it seems to be a great tool to reduce the size of our CSS bundle.

On PurgeCSS website, they explain how to integrate with Webpack. I found a tutorial that explains how to add custom webpack integration with Angular CLI.

Did anyone have a successful example of PurgeCSS integrated with Angular CLI project ?

解决方案

I created this bash script to use PurgeCSS with my Angular app. It reduced my 'styles.css' file size from 63kb to only 3kb! Hope it works for you too.

Steps:

1. create a new file named purgecss.sh inside your project folder
2. insert the code below into purgecss.sh file
3. run ./purgecss.sh from CLI

#!/bin/bash

# run production build
ng build --prod --output-hashing none

# go to the dist/yourProjectName folder
cd ./dist/yourProjectName

# make a new directory named 'css' (you can name it anything)
mkdir css

# run PurgeCSS & make a new '.css' file inside the 'css' directory
purgecss --css ./styles.css --content ./index.html ./*.js --out ./css

# replace the 'dist/yourProjectName/styles.css' file with the 'dist/yourProjectName/css/styles.css' file
mv ./css/styles.css ./styles.css

# delete the previously created 'css' directory
rm -r css

这篇关于如何将 PurgeCSS 与 Angular CLI 项目集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！