使用 Laravel Mix 将 CSS 和 HTML 文件缩小到相同的位置答案

【问题标题】：Minify a CSS and HTML file to the same location using Laravel Mix使用 Laravel Mix 将 CSS 和 HTML 文件缩小到相同的位置
【发布时间】：2021-04-13 07:40:12
【问题描述】：

我在这些位置有两个文件，一个 CSS 和一个 HTML：

resources/js/example/file.css
resources/js/example/file.html

我想使用 Laravel Mix (webpack) 做的是

将 CSS 文件压缩到 file.min.css 到同一目录中
将HTML文件压缩成file.min.html到同一目录下

我试过了：

mix.postCss('resources/js/example/file.css', 'resources/js/example/file.min.css', [
    require('cssnano')
]);

但这会在 public/js/example/file.min.css 中创建 CSS 文件。

【问题讨论】：

标签： laravel laravel-mix postcss

【解决方案1】：

我不确定您为什么不希望已编译的文件位于公共目录中。无论如何，您可以使用mix.setPublicPath() 更改输出目录。这将告诉 Mix 你想要将所有资产编译到的基本目录。

webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('');
mix.postCss('resources/js/example/file.css', 'resources/js/example/file.min.css', []);

如果你想混合和缩小 HTML 文件，你可以安装这个插件。

npm install minify-html-webpack-plugin --save-dev

然后添加到你的 webpack...

const MinifyHtmlWebpackPlugin = require('minify-html-webpack-plugin');
const mix = require('laravel-mix');

mix.setPublicPath('');
mix.postCss('resources/js/example/file.css', 'resources/js/example/file.min.css', []);
mix.webpackConfig({
    plugins: [
        new MinifyHtmlWebpackPlugin({
            afterBuild: true,
            src: './resources/js/example',
            dest: './resources/js/example',
            ignoreFileNameRegex: /\.(gitignore|php)$/,
            ignoreFileContentsRegex: /(<\?xml version)|(mail::message)/,
            rules: {
                collapseBooleanAttributes: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
                minifyJS: true,
            }
        })
    ]
});

并进行开发或生产构建。请记住，您必须使用 src 和 dest 才能完全按照您想要的方式获得输出。

【讨论】：