Как я могу использовать gulp для объединения компонентов bower_components, содержащих активы?

Я разрабатываю пример приложения, которое использует bower для управления зависимостями и gulp для его сборки.

Я использовал плагин main-bower-files, чтобы скопировать все соответствующие файлы из каталога bower_components в каталог build/dist/bower_components.

Все это работает отлично, и я могу открыть приложение index.html, которое правильно указывает на каждый из этих файлов, и они правильно указывают на активы.

Мой следующий шаг - объединить bower_components, чтобы у меня был один CSS и один JS файл вместе со всеми активами (шрифты, изображения и т.д.). Я использовал gulp-useref для объединения всех компонентов, и, похоже, он работает хорошо.

Однако некоторые из комбинированных файлов CSS и JS используют относительные пути к ссылочным активам, которые теперь неверны, поскольку все находится в одном файле:

FontAwesome
Bootstrap
и пользовательский компонент Bower, который мы создаем

Существует ли стандартное решение для фиксации активов?

Нужно ли использовать gulp для обновления ссылок на ресурсы или, возможно, с помощью другого плагина?

Ответ 1

Используя gulp -replace plugin, мы можем объединить оценки bower_components.

Например:

var replace = require('gulp-replace');

gulp.task('fix-paths', ['minify'], function() {
    gulp.src('public/css/site.css')
        .pipe(replace('../', '../bower_components/bootstrap/dist/'))
        .pipe(gulp.dest('public/css'));
});

Ответ 2

Я использую плагин gulp для вставки конкатенированного файла в html. Что-то вроде этого -

gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() {
    gulp.src('./*.html')
        .pipe(inject(gulp.src(['./dist/js/**/*.js'])
            .pipe(angularFilesort()), {
                'ignorePath': 'dist/js',
                'addRootSlash': false,
                'addPrefix': 'scripts'
            }))
        .pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], {
            read: false
        }), {
            'name': 'vendors',
            'ignorePath': 'dist/vendors',
            'addRootSlash': false,
            'addPrefix': 'vendors'
        }))
        .pipe(inject(gulp.src(['./dist/css/*.css'], {
            read: false
        }), {
            'ignorePath': 'dist/css',
            'addRootSlash': false,
            'addPrefix': 'styles'
        }))
        .pipe(gulp.dest('dist'));
});

Сообщите мне, нужен ли вам больше кода.

Ответ 3

Для CSS, я бы предложил использовать gulp-rework, который обертывает rework, в котором есть несколько очень полезных плагинов.

Один из них url, который предоставляет функцию обновления URL-адресов, содержащихся в CSS.

Пример, где это полезно, находится в CSS, который не содержит пути для замены; например

URL (backgroundimage2.png)

Или вы хотите выполнить различные изменения URL-адреса на основе типа (например, только изображения, а не веб-шрифты).

Функция может состоять из тестов для типа актива; в следующем примере обрабатываются только файлы изображений:

   // CSS
  .pipe(cssFilter)
  .pipe(rework(reworkUrl(function (url) {
      // modifications on url, e.g. using http://medialize.github.io/URI.js/   
      if (url.match(/[^/]+(jpg|jpeg|png|gif)$/))
      {
          return '/lib/img/' + url.replace('../', '');
      }
      else
      {
          return url;
      }

   })))

Ответ 4

Недавно я нашел ту же проблему, которая прошла через различные решения, и одна из них заключалась в том, чтобы заменить содержимое css в этом ответе. После просмотра шрифта-awesome.css было ясно, что он относит относительный путь к папке шрифтов. То же самое было с bootstrap css. Решение просто теперь всегда следить за сохранением папки css и fonts на том же уровне и копировать данные. Даже включите здесь свои мини файлы приложения. Одно место для всех файлов dist облегчает жизнь