前言

之前有了解到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的大小,所以我们需要想办法进行优化,优化从两方面入手:

  1. 只生成有用的样式,例如我们的项目中用到了p-1,那么我们就生成p-1相关的样式,没有用到p-2就不生成p-2相关的样式。
  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行了,这也达到了我们生产环境的标准。

您可能感兴趣的: