Управление активами - ведение ссылки на относительные активы после объединения и управления версиями

Я знаю, что L5 и Elixir все еще находятся в стадии разработки, но я рад начать думать о способах реорганизации моего кода. Я думаю, что мой вопрос больше связан с управлением активами в контексте L5 и Elixir.

Хочу уточнить, как следует обрабатывать конкатенацию и управление версиями (в моем случае я использую Elixir's styles() а также version()). Проблема, с которой я столкнулся, заключается в том, что новый файл после concat / version будет помещен в новую папку, что нарушит любые ссылки на ресурсы из исходных файлов css или js.

Например, оригинальный файл CSS, который имеет background-image: url('../img.png') больше не будет работать. Я попробовал пару вещей, но оба не идеальны, особенно в случае плагинов вендора:

  1. Переместите требуемые ресурсы поочередно (используя mix.copy() для каждой папки ресурсов) в новый путь сборки (т. Е. Путь сборки, используемый версионированием Elixir).
  2. Вручную отредактируйте пути в каждом файле активов, чтобы они ссылались на абсолютный путь

Хотя оба эти варианта будут работать, я чувствую, что могу что-то упустить. Это также становится непрактичным при работе с плагинами javascript (например, со своими изображениями, шрифтами, таблицами стилей и т. Д.).

Существует ли более практичный способ управления относительными путями при объединении и управлении версиями?

Источник

3 ответа

Решение

РЕДАКТИРОВАТЬ:

Я только что отправил запрос на извлечение в Elixir, так что вы можете просто сделать:

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/');
});
Источник

Это относительные пути, поэтому сохраняйте относительные отношения.

Просто переместите изображения на public/build/ каталог как часть gulp Команда, после видения.

Источник
Другие вопросы по тегам