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

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

我正在开发一个使用 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 文件使用相对路径来引用资产,这现在是不正确的,因为所有内容都在一个文件中:

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

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

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

我正在使用 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'));
});

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

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

对于 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;
      }

   })))