前端

Tailwindcss生成最小化生产环境样式

6分钟读完

前言

之前有了解到tailwindcss，发现还是很好用的，虽说网上最这种css方式异议颇多，但并不妨碍我对它的喜爱。然而在使用过程中还是产生了一些问题。最主要的就是tailwindcss样式太大了，如何压缩？如何去除多余的样式？生产环境中如何使用？

开发环境

首次接触这个tailwind时当然是打开官方文档，查看安装使用教程，发现安装方式分为nodejs和cdn，为了测试效果，我就选择了cdn的方式，直接引用css文件，然后测试了一下像container、p-2这些，发现还是蛮好用的，但是这个cdn文件有将近4兆的大小，于是下载到本地，本地开发时引用本地的css文件，虽然依然很大，但是没有了网络的限制，所以直接开始了页面的制作。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

使用方法很简单，就是html页面应用这个css文件即可。

生产环境

随着页面逐渐制作完毕，我也到了把本地网页部署到服务器的时刻，所以开始考虑优化了，首先使用这种cdn的方式肯定是不可取了，即便带宽允许，但是加载很多无效的样式，实在是有点浪费，于是看文档如何优化，这也就到了使用node的时候。由于坑已经踩过了，下面就说一下步骤。

1. 准备工作

首先要准备nodejs，建议使用nodejs最新版本，14.x以下的环境某个包不支持，所以第一步就是下载nodejs，之后可以设置淘宝镜像，但是不要安装cnpm，这个cnpm会有一些意想不到的问题。设置淘宝镜像很简单：

npm config set registry http://registry.npm.taobao.org/

只需要在cmd中输入回车即可。

因为我们需要用到postcss，所以还是要安装postcss脚手架，建议全局安装：

npm install postcss-cli -g

windows用户按下windows按键+x，打开Windows Powershell（管理员），输入：

set-ExecutionPolicy RemoteSigned

按下Y，回车。

这一步是因为有些系统禁止运行脚本，会提示：vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\xxx.ps

到这里，准备工作就已经全部完成。

2. 创建tailwindcss项目

首先我们需要创建一个nodejs项目，之后安装tailwindcss，postcss，cssnano，autoprefixer，其中tailwindcss就是我们的项目，postcss用来打包发布，cssnano是用来压缩css的，简单来说就是“反格式化”，进一步减小我们的css文件，autoprefixer是用来给css加各种浏览去前缀的。安装完成之后初始化tailwind项目，命令如下：

npm init -y
npm install -D tailwindcss postcss autoprefixer cssnano
npx tailwindcss init -p

可以看到目录下新增了两个文件：postcss.config.js，tailwind.config.js，同级目录下新建一个css文件，我这里取名为tailwind.css，内容为：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

到这里，我们就已经可以生成tailwind.css，终端输入：

postcss tailwind.css -o compiled.css

提示postcss错误的，看看是不是没有全局安装postcss脚手架

回车后等待一会儿，就将complied.css生成出来了。

3. 生产优化

但是生成的complied.css有接近4mb的大小，所以我们需要想办法进行优化，优化从两方面入手：

只生成有用的样式，例如我们的项目中用到了p-1，那么我们就生成p-1相关的样式，没有用到p-2就不生成p-2相关的样式。
使用cssnano去掉多余的换行和空格。

这里我们首先从只生成有用的样式出发，打开tailwind.config.js：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我们从purge这个地方入手，将内容修改为：

module.exports = {
  purge: {
    enabled:true,
    content:[
      '*.html'
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

可以看到，新增了一个enabled，值为true以及一个content，值为当前目录下的所有html，意思就是开启对当前目录下的所有html进行按需生成样式。目前，我们的目录下没有html文件，直接生成的话会有什么样的效果呢？

每次手动输入postcss命令有些麻烦，我们可以修改package.json，在scripts内增加,"build":"postcss tailwind.css -o compiled.css"，效果如下：

//package.json
{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"postcss tailwind.css -o compiled.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "cssnano": "^5.0.11",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.19"
  }
}

这样可以直接在终端输入 npm run build 的命令进行生成。可以看到新生成的样式只有几百行最基础的框架。接下来就是按需生成的时刻了。

新建一个html：index.html，写入代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="container"></p>
</body>
</html>

这里我们只用到了tailwind的container样式，那么接下来重新执行生成命令。如果观察到位的话可以发现新生成的complied.css增加了container相关的样式代码，所以我们只需要在purge内的content中添加我们的html路径地址，就可以按项目需要生成我们自己的样式了。

其实可以看到刚刚生成的代码都是整整齐齐的，很利于我们人类观看，但是这也就意味着多了很多不必要的换行、空格等，所以为了进一步的压缩样式文件，我们需要将代码压缩为一行，这也就是cssnano的作用，打开postcss.config.js，可以看到它默认添加了tailwindcss和autoprefixer，那么按照格式，我们将cssnano也添加进去，代码如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano:{}
  },
}

接下来我们重新生成，npm run build，可以看到新的complied.css只有3行了，这也达到了我们生产环境的标准。

标签:
前端
NodeJS

您可能感兴趣的：

Android

android低功耗蓝牙(BLE)教程

2013 年 7 月，Android API 18 版本引入了对低功耗蓝牙（BTLE）的支持。随着越来越多的设备进入市场，增加对BTLE设备的支持已成为许多人的首要任务。但是，对于新手来说，深入研究Android BTLE文档可能有点令人生畏。本教程将演练 BTLE 的基本概念，然后显示代码片段，以进一步说明与远程设备的通信。 BTLE概念顾名思义，低功耗蓝牙旨在提供与经典蓝牙相似的通信范围，同时使用更少的功率。BTLE 设备将进入睡眠模式，并仅在连接尝试或事件时唤醒。因此，软件开发人员需要了解BTLE中的一些基本概念。了解这些我们在进行经典蓝牙编程时不关心的概念。 GATT 配置文件所有 BTLE 设备都实现一个或多个配置文件。配置文件是一个高级定义，描述如何使用服务来启用应用程序。低能耗应用程序配置文件基于通用属性配置文件（GATT）。这是通过低能量链路发送和接收短数据（称为属性）的一般规范。客户客户端是启动 GATT 命令并接受响应的设备。对于我们的示例，Android设备将充当客户端，因为这是一个典型的用例。但是，Android BTLE

4 个月前 9 min read

前端

JavaScript制作英文大小写转换工具

起因最近有做跨境电商的朋友想要一个一键大小写转换的工具，具体来说就是把一句英语的所有单词首字母大写，这还不是有手就行？于是我分分钟就写了一个一键把所有单词的所有字母转换成大写和一个一键把所有单词的字母转换成小写的工具，简简单单！然而，我卡在了所有单词的首字母转大写这里。好吧，我收回我之前说的话。这个工具需要算法了。核心先说说怎么实现全部字母转大写和小写吧，基本上所有的语言都支持一键转大写和小写，在JavaScript中，方法为：String.toUpperCase() 和 String.toLowerCase(),也就是说放一个文本域，获取到文本域的值，然后使用上面两个方法来赋值就可以了。首字母转大写的话就在于如何让程序识别出来第一个字母，然后转大写。分析首先来看这个句子： this is my computer 需要转换的字母分别为：t、i、m和c，t我们可以直接转换第一个字母，那么我们就需要分析如何获取到i、m和c，他们都有一个共同的特点，就是前面有个空格，所以我们就可以从这一点下手，找空格。只要找到空格，就可以设置空格的后面一个字母为大小。好了，分析完成，开始写算法。算法根据空格，

7 个月前 5 min read

前端

国庆节在家做一个文字识别网站

国庆节一直在下雨，我也没有办法出去愉快的玩耍，突然想到之前有在服务器上部署一个ocr文字识别接口，于是就想要做一个在线OCR识别工具，说干就干，但是打开了vs code却无从下手，页面应该怎么做呢？想直接用识别接口的：https://zn.gg/tools/ocr 思路首先需要上传图片然后把图片转换成base64编码之后通过ajax请求接口展示返回识别到的内容上传图片并获得base64编码上传图片的话使用表单的input标签就可以，然后使用FileReader可以读取到图片内容，那么代码如下： <input type="file" accept="image/jpeg,image/png,image/jpg,image/png" onchange="uploadImg(this)" multiple/> <script>

8 个月前 6 min read

Android

MainActivity中的onCreate两次或多次启动

问题这两天安卓开发遇到一个问题，MainActivity中的onCreate多次执行，我的程序是一个开屏页，倒计时5秒后使用startActivity跳转到MainActivity中，我在开屏页的onCreate和MainActivity中的onCreate都增加了日志，却发现只有MainActivity中的onCreate被执行了2次，原因不明。解决过程（踩坑过程）在进行简单的打印日志后发现，只有MainActivity的onCreate被莫名其妙的多执行了一次，于是开始处理问题：根据进程判断（无效）这是我在百度上找到的，博主的标题为：onCreate被多次（调用）执行的解决方法，博主写的一大堆知识我就直接选择性忽略掉了，直接CV一下代码： public void onCreate() { String curProcessName = getProcessName(this, android.os.Process.myPid()); if (curProcessName != null && curProcessName.equalsIgnoreCase(this.getPackageName())) { //初始化主线程资源 } else { //初始化其它进程的资源 return; } } public static String getProcessName(

6 个月前 5 min read

Contact

前言

开发环境

生产环境

1. 准备工作

2. 创建tailwindcss项目

3. 生产优化

您可能感兴趣的：