Question

我正在开发一个示例应用程序，该应用程序使用bower进行依赖关系管理，并gulp用于它的构建系统。

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

这一切都很完美，我可以打开我的应用程序index.html，它正确指向这些文件，并正确指向资产。

我的下一步是连接bower_components，以便我有一个CSS和一个JS文件以及所有资源（字体，图像等）。我已经使用gulp-useref来捆绑所有组件，它似乎很好用。

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

FontAwesome
自举
以及我们正在制作的自定义凉亭组件

是否有修复资产的标准解决方案？

我是否需要使用gulp来更新资产引用或者使用其他插件？

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

我正在使用gulp 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 ，我建议使用gulp-rework，它包含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;
      }

   })))

Answer 4

最近我发现了同样的问题，因此经历了各种解决方案，其中一个就是在这个答案中替换css的内容。在查看font-awesome.css后，很明显它指的是到达字体文件夹的相对路径。 bootstrap css的情况也是如此。解决方案很简单，现在始终确保将css和fonts文件夹保持在同一级别并复制数据。甚至包括您的应用程序特定的min文件。所有dist文件的单一位置使生活变得轻松

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

4 个答案: