使用 Laravel Mix 对 Laravel 5.4 中的组合 CSS 文件进行版本控制

Question

我在 Laravel 5.4 中使用 Laravel Mix，我想合并到普通文件并添加版本控制。

阅读它说的文档

version 方法会自动为 所有编译文件的文件名，允许更方便的缓存 破坏

它有效地做到了它所说的。但是有没有什么变通方法来获得带有版本控制的最终组合文件？

实际上，我想将一些编译后的文件与其他普通文件合并在一起，并将所有内容合并到一个版本化文件中。

编辑：

我使用的代码如下

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .combine(['public/css/app.css', 'other/component/file.css'], 'public/css/all.css')
   .version();

我想获得一个版本化的all.css 文件。即类似all.d41d8cd98f00b204e9800998ecf8427e.css。

但是我得到的是app.css 的版本化版本和all.css 的非版本化版本。

Answer 1

CSS 和 JS 文件的版本控制/缓存清除

Webpack.Mix

将我的 css（使用 mix.styles）和 js（使用 mix.scripts）文件合并为两个文件后，我得到了 all.css 和 all.js。

要添加版本控制，我做了以下操作：

var timestamp = Date.now();
mix.copy('public/css/all.css', 'public/css/all/all.'+ timestamp + '.css');
mix.copy('public/js/all.js', 'public/js/all/all.'+ timestamp + '.js');

或

你的css和js文件合并的时候直接写，例如：

mix.styles([
    'public/css/app.css',
    'public/css/custom.css'], 'public/css/all/all.'+ Date.now() + '.css').

mix.scripts([
    'public/js/app.js',
    'public/js/custom.js'], 'public/js/all/all.'+ Date.now() + '.js').

刀片布局文件：

我创建了 /css/all/ 和 /js/all/ 目录。我使用scandir() php function 来获取相应目录中的所有文件。然后我从数组中得到了第一个文件名，在这个例子中是'all.1574160664960.css'。

@php($css_files = scandir('css/all/', 1))
<link href="/css/all/{{ $css_files[0] }}" rel="stylesheet">

@php($js_files = scandir('js/all/', 1))
<script src="/js/all/{{ $js_files[0] }}"></script>

Answer 2

https://laravel-mix.com/docs/5.0/versioning

在 webpack.mix.js 中：

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.sass', 'public/css')
   .version();