如何使用gulp连接包含资产的bower_components？

Question

我正在开发一个示例应用程序，它使用鲍尔作为它的依赖管理，大口吞下用于它的构建系统。

我使用主弓形文件插件将bower_components目录中的所有相关文件复制到build/dist/bower_components目录中。

所有这些操作都很完美，我可以打开我的应用程序的index.html，它正确地指向这些文件中的每一个，它们正确地指向资产。

下一步是将bower_components连接起来，以便我有一个CSS和一个JS文件以及所有资产(字体、图像等)。我已经使用吞咽-使用者捆绑了所有组件，而且它似乎工作得很好。

但是，正在组合的一些CSS和JS文件使用相对路径来引用资产，这些资源现在是不正确的，因为所有内容都在一个文件中：

• FontAwesome
• 引导
• 以及我们正在创建的自定义bower组件。

有固定资产的标准解决方案吗？

我是否需要使用gulp来更新资产引用，或者使用不同的插件？

Answer 1

使用gulp替换插件，我们可以连接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'));
}); 

Answer 2

我正在使用将连接的文件注入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，我建议使用吞咽-返工，它封装了一些非常有用的插件的返工。

其中之一是url，它提供了一个用于更新CSS中包含的urls的函数。

这是一个有用的例子，在不包含可替换路径的CSS中。

url(背景数据2.png)

或者，您希望根据类型对URL执行不同的更改(例如，仅针对图像，而不是web字体)。

可以组成一个函数来测试资产类型；下面的示例只处理图像文件：

   // 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;
      }

   })))