Как использовать gulp для конкатенации bower_components, которые содержат активы?

Question

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

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

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

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

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

• FontAwesome
• Bootstrap
• и обычай составляющей антенны мы создаем

Есть ли стандартное решение для фиксации активов?

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

Answer 1

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

Например:

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')); 
}); 

Answer 2

Я использую глоток INJECT плагин, чтобы придать сцепленный файл в формат 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')); 
}); 

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

Answer 3

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

Answer 4

Для 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; 
     } 

    })))