如何在Mac中压缩文件

Posted 2023-04-28

Mac如何压缩文件？

在Mac上压缩文件通常有两种方式：一是用Mac上自带的功能压缩；二是用第三方工具压缩。

1.使用Mac自带的功能压缩文件

选中文件，右键或者按住点击+按住「control」，调出右键菜单；

选择其中的「压缩」即可压缩Mac中的文件；

需要注意的是：这个功能只能将文件压缩为zip格式的，也没办法设置压缩文件的「压缩等级」或给压缩文件设置密码。

2.使用第三方工具压缩文件

这里使用的是赤友右键超人里的「压缩」功能。

选中文件，调出右键菜单，点击「归档」；

进入功能页面，然后根据自己的需求给要压缩的文件设置密码和压缩等级；

最后点击「压缩」按钮就压缩成功了。

参考技术A 目录方法1：使用Finder1、打开Finder。2、选择文件。3、压缩文件。方法2：使用第三方软件1、寻找压缩软件。2、添加文件。3、加密文件。如果你的电脑里有大量的旧文件占据了硬盘，那么你可以将这些文件压缩，从而留出更多的空间。Mac OS X系统自带压缩功能，可以直接对文件进行压缩。同时，你还可以下载第三方软件对文件进行更有效的压缩。阅读本文，将你的旧文件打包压缩吧。
方法1：使用Finder
1、打开Finder。你可以通过点击Dock栏的Finder图标打开它，它的图标看起来是个方形的蓝脸。打开Finder之后，从里面找到你要压缩的文件。将位于不同地方的多个文件压缩成一个“.zip”文件，你需要先新建一个文件夹，然后将要压缩的文件都移动到里面。
2、选择文件。你可以按住Command然后从文件列表中选择多个要压缩的文件。选完之后，右键单击任意一个文件。如果你的鼠标只有一个按键，那需要先按住Ctrl，然后点击文件。如果你想压缩整个文件夹中的文件，只需要右键点击文件夹即可。
3、压缩文件。在右键菜单中选择“压缩”，然后等待压缩完成。根据所压缩文件的数量，需要的时间也不同，可能需要等待几分钟。最终的压缩文件的文件名和被压缩的文件或文件夹的名字一样。压缩多个文件或文件夹所产生的压缩文件的文件名是“Archive.zip”。
压缩文件大概是原文件大小的90%，具体的压缩率还要取决于所压缩文件的类型。
方法2：使用第三方软件
1、寻找压缩软件。在网上可以找到很多压缩软件，收费的付费的都有。有些压缩格式，比如“.rar”，需要专门的软件才能生成。其他的格式，比如“.zip”，大部分压缩软件都可以生成。其它的专有压缩方式所生成的文件比Mac OS X系统自带的压缩方式所生成的zip文件更小。
2、添加文件。当你安装并打开了压缩软件之后，从软件中添加要压缩的文件和文件夹。具体的方式因软件的不同而不同，但通常，你可以直接将要压缩的文件和文件夹拖得软件的窗口中。
3、加密文件。很多压缩软件都可以给生成的文件添加密码。查看软件的"安全"区域，或者在文件菜单中选择“添加密码”或“加密”，都可以给文件加密。

如何使用 postcss 在顺风中压缩文件大小？

【中文标题】如何使用 postcss 在顺风中压缩文件大小？

【英文标题】：How to compress file size in tailwind using postcss?

【发布时间】：2020-10-27 17:27:47

【问题描述】：

我有以下 postcss.config.js 文件：

// postcss.config.js
module.exports = 
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]

以及以下tailwind.config.js 文件：

// tailwind.config.js
module.exports = 
    purge: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
    theme: ,
    variants: ,
    plugins: [],

我的目标是压缩生成的 css，为此我在 tailwind.config.js 中添加了清除键。

要从 .src tailwind 文件中生成 css，styles.src.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

我正在运行命令：

postcss ./resources/public/css/styles.src.css -o ./resources/public/css/styles.css

从包含tailwind.config.js 和postcss.config.js 的项目的根目录中。然而运行命令后，生成的 css 为 1.2MB，与我没有清除密钥时的 css 一样大。为什么 postcss 清除不起作用？

【问题讨论】：

你的项目中有 webpack.mix.js 文件吗？

不，我不知道，也不知道这与这里有什么关系

好吧，我遇到了同样的问题，我通过管理 webpack 文件中的配置解决了这个问题。对我来说，这是相关的，这就是我问的原因。

【参考方案1】：

postcss 不需要该命令。

只需在tailwind.config.json 中的清除中添加enabled:true 并将您的路径包装到列表中，如https://tailwindcss.com/docs/optimizing-for-production#enabling-manually 中所述：

  purge: 
    enabled: true,
    content: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
  ,

来了！现在您可以运行并查看结果：

npm run build:css

这是我在package.json中使用的命令：

"scripts": 
    "build:css": "tailwind build static/css/tw.css -o static/css/tailwind.css"
  ,

【参考方案2】：

您的 PostCSS 配置在 tailwind.config.js 和 postcss.config.js 之间拆分，而它们应该都在 postcss.config.js 中。

为什么？

Tailwind 在幕后使用 PostCSS。但是 PostCSS 本身并不知道您的 tailwind.config.js 文件。要使用postcss 命令，您需要在postcss.config.js 文件中指定purge 选项，而不是tailwind.config.js。 Tailwind 网站上的This page 详细解释了这两个文件的区别。

这是我的设置：

// postcss.config.js
module.exports = 
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')(
            // Specify the paths to all of the template files in your project
            content: [
              './src/cljs/foo/*.cljs',
              './target/cljs-runtime/*.js',
              './target/cljsbuild/public/js/*',
              './target/cljsbuild/public/js/cljs-runtime/*',
              './target/*'
            ],
            // This extractor will tell PurgeCSS to ignore all CSS selectors and tags used in your files
            defaultExtractor: content => Array.from(content.matchAll(/:?([A-Za-z0-9-_:]+)/g)).map(x => x[1]) || []
        ),
    ]

注意我的 tailwind.config.js 文件是空的：

// tailwind.config.js
module.exports = 
  purge: [],
  theme: 
    extend: ,
  ,
  variants: ,
  plugins: [],

【参考方案3】：

您也可以在postcss.config.js 中添加清除键。

这是我的配置 postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')(
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.js', './public/index.html'],

  // make sure css reset isnt removed on html and body
  whitelist: ['html', 'body'],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [], 
)


module.exports = 
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),

    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],

重要：环境变量NODE_ENV负责dev和prod环境。如果您在开发模式下使用 tailwindcss，那么您不想清除，因为您想使用所有可用的样式。通过将其设置为production 模式将通知postcss，因此这将清除未使用的css。

请注意，我没有在 webpack 配置中为 tailwindcss 设置任何配置。

在构建时，请确保将 NODE_ENV 设置为生产用例的特定值。您可以使用'production' 或'prod' 没关系。同样会反映在 postcss.config.js 中。

【参考方案4】：

Tailwind 将自动清除 - 从他们的文档中：

现在，当您在将 NODE_ENV 设置为生产时编译 CSS 时，Tailwind 会自动从您的 CSS 中清除未使用的样式

https://tailwindcss.com/docs/controlling-file-size#basic-usage

您可以为您的开发和生产环境运行命令 - development 将保留所有 Tailwind 的类，production 将运行清除。

package.json:

  "dependencies": 
    "autoprefixer": "^9.8.5",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.5.2"
  ,
  "devDependencies": 
    "cross-env": "^7.0.2"
  ,
  "scripts": 
    "watch": "cross-env NODE_ENV=development postcss static/css/tailwind.css -o  style.css --watch",
    "build": "cross-env NODE_ENV=production postcss static/css/tailwind.css -o  style.css"
  ,

postcss.config.js

module.exports = 
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]