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

Question

我正在开发一个使用 bower for it's dependency management and gulp 作为构建系统的示例应用程序。

我已经使用 main-bower-files 插件将所有相关文件从 bower_components 目录复制到 build/dist/bower_components 目录。

一切正常，我可以打开我的应用程序 index.html，它正确地指向这些文件中的每一个，并且它们正确地指向资产。

我的下一步是连接 bower_components，这样我就有一个 CSS 和一个 JS 文件以及所有资产（字体、图像等）。我已经使用 gulp-useref 捆绑了所有组件，它似乎运行良好。

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

FontAwesome
Bootstrap
以及我们正在创建的自定义 Bower 组件

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

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

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

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

如果您需要更多代码，请告诉我。

Answer 3

最近我发现了同样的问题，所以通过了各种解决方案，其中之一是替换此答案本身中 css 的内容。查看 font-awesome.css 后，很明显它指的是到达字体文件夹的相对路径。 bootstrap css 也是如此。现在解决方案很简单，始终确保将 css 和字体文件夹保持在同一级别并复制数据。甚至在此处包含您的应用程序特定的最小文件。所有 dist 文件的单一位置让生活更轻松

Answer 4

对于 CSS，我建议使用 gulp-rework, which wraps rework，它有许多非常有用的插件。

其中之一是 url，它提供了更新 CSS 中包含的 url 的功能。

一个有用的示例在 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;
      }

   })))

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

How can I use gulp to concatenate bower_components that contain assets?

gulp

bower

bundling-and-minification