资产管理——在连接和版本控制后维护对相关资产的引用
Asset management - maintaining reference to relative assets after concatenation and versioning
我知道 L5 和 Elixir 仍在开发中,但我很高兴开始考虑重新组织我的代码的方法。我认为我的问题更多地与资产管理有关,在 L5 和 Elixir 的背景下。
想要阐明应该如何处理连接和版本控制(在我的例子中,我使用的是 Elixir 的 styles()
和 version()
)。我遇到的问题是 concat/version 之后的新文件将位于新文件夹中,从而破坏了对原始 css 或 js 文件中资产的任何引用。
例如,具有 background-image: url('../img.png')
的原始 CSS 文件将不再有效。我已经尝试了一些东西,但两者都不理想,尤其是在供应商插件的情况下:
- 将所需的资产逐一移动(对每个资产文件夹使用 mix.copy()),到新的构建路径(即 Elixir 版本控制使用的构建路径)。
- 手动编辑每个资产文件中的路径以引用绝对路径
虽然这两个选项都可以解决问题,但我觉得我可能遗漏了一些东西。在使用 javascript 插件(例如带有自己的图像、字体、样式表等的插件)时,它也变得非常不切实际。
在连接和版本控制时是否有更实用的管理相对路径的方法?
它们是相对路径 - 所以保持相对关系。
在视觉之后,作为 gulp
命令的一部分,只需将图像移至 public/build/
目录。
编辑:
我刚刚向 Elixir 提交了一个 pull request,所以你可以这样做:
mix.version(
['css/style.css', 'css/vendor/style.css'], //files to be versioned
['fonts', 'css/vendor/icons'] //dependent files/dirs to be copied
);
旧答案:
实际上,如果您单独使用 mix.copy(...)
,则无法使用 gulp watch
,您需要重新编译整个堆栈才能使其正常工作。
您可以使用以下解决方案获得相同的结果,并且不需要重新编译所有内容,因为它只会在您更改版本控制文件时起作用:
var shell = require('gulp-shell');
gulp.task('cp', shell.task(['cp -R public/fonts public/build/',
'cp -R path/to/vendor/dir public/build/vendor/',
'... etc ...']));
elixir(function(mix) {
...
//register a watcher to run 'cp' when you rebuild
mix.task('cp','public/build/**/*.(js|css)');
}
这是针对 Laravel Elixir 构建版本控制后的解决方案。
对于复制命令,您需要将其作为完整路径引用。
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.version('themes/default/assets/css/styles.css')
.copy('public/themes/default/assets/img/', 'public/build/themes/default/assets/img/');
});
我知道 L5 和 Elixir 仍在开发中,但我很高兴开始考虑重新组织我的代码的方法。我认为我的问题更多地与资产管理有关,在 L5 和 Elixir 的背景下。
想要阐明应该如何处理连接和版本控制(在我的例子中,我使用的是 Elixir 的 styles()
和 version()
)。我遇到的问题是 concat/version 之后的新文件将位于新文件夹中,从而破坏了对原始 css 或 js 文件中资产的任何引用。
例如,具有 background-image: url('../img.png')
的原始 CSS 文件将不再有效。我已经尝试了一些东西,但两者都不理想,尤其是在供应商插件的情况下:
- 将所需的资产逐一移动(对每个资产文件夹使用 mix.copy()),到新的构建路径(即 Elixir 版本控制使用的构建路径)。
- 手动编辑每个资产文件中的路径以引用绝对路径
虽然这两个选项都可以解决问题,但我觉得我可能遗漏了一些东西。在使用 javascript 插件(例如带有自己的图像、字体、样式表等的插件)时,它也变得非常不切实际。
在连接和版本控制时是否有更实用的管理相对路径的方法?
它们是相对路径 - 所以保持相对关系。
在视觉之后,作为 gulp
命令的一部分,只需将图像移至 public/build/
目录。
编辑:
我刚刚向 Elixir 提交了一个 pull request,所以你可以这样做:
mix.version(
['css/style.css', 'css/vendor/style.css'], //files to be versioned
['fonts', 'css/vendor/icons'] //dependent files/dirs to be copied
);
旧答案:
实际上,如果您单独使用 mix.copy(...)
,则无法使用 gulp watch
,您需要重新编译整个堆栈才能使其正常工作。
您可以使用以下解决方案获得相同的结果,并且不需要重新编译所有内容,因为它只会在您更改版本控制文件时起作用:
var shell = require('gulp-shell');
gulp.task('cp', shell.task(['cp -R public/fonts public/build/',
'cp -R path/to/vendor/dir public/build/vendor/',
'... etc ...']));
elixir(function(mix) {
...
//register a watcher to run 'cp' when you rebuild
mix.task('cp','public/build/**/*.(js|css)');
}
这是针对 Laravel Elixir 构建版本控制后的解决方案。 对于复制命令,您需要将其作为完整路径引用。
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.version('themes/default/assets/css/styles.css')
.copy('public/themes/default/assets/img/', 'public/build/themes/default/assets/img/');
});