如何使用 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 文件使用相对路径来引用资产,这现在是不正确的,因为所有内容都在一个文件中:
- FontAwesome
- Bootstrap
- 以及我们正在创建的自定义 Bower 组件
有固定资产的标准方案吗?
我是否需要使用 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;
}
})))
我正在开发一个使用 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 来更新资产引用或者可能使用不同的插件?
使用 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;
}
})))