如何将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 文件
从CLI
3. 运行 ./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屋！