如何配置 Gulp 任务以复制 bower 资源
Posted
技术标签:
【中文标题】如何配置 Gulp 任务以复制 bower 资源【英文标题】：How to configure Gulp task to copy bower resources 【发布时间】：2015-04-18 20:26:24 【问题描述】：使用 gulp 复制 bower 资源的正确方法是什么。
我想要一个任务“构建”（用于开发），它将：
将 /src/index.jade 转换为 /build/index.html 将 bower 资源复制到 /build/vendor/* 将我的资源复制到 /build/css、js、assets 在 index.html 中注入这些资源（我和 bower 的）我在使用“font awesome”时遇到了问题，因为它们的资源（.ttf、.otf...）在 font-awesome.css 中被引用为：“../font/fontawesome-webfont.ttf”
我尝试使用wiredep，将js和css复制到/vendor（无文件夹结构）并且没有复制字体。
我也尝试使用 main-bower-files，它也将所有资源（和字体）复制到 /vendor 文件夹，但也没有内部结构
并尝试使用 bowerNormalizer，创建一个文件夹结构，如“/vendor/font-awesome//”（也无效）
最后，尝试使用 gulp-bower-files，它复制了所有 bower 文件（min、dist、src），这也不对
PS：我现在不想要 min/uglify/concat。这件事稍后会在“dist”任务中完成
【问题讨论】：
【参考方案1】：另一种方法：
假设你已经安装：
一饮而尽 运行序列 主凉亭文件 gulp-注入如果你不这样做，你可以像这样使用 npm 安装：
npm install gulp run-sequence main-bower-files gulp-inject --save-dev
将依赖项保存到 html 文件中
一旦你有了它，我们就开始配置 gulp 任务
//Here we only copy files to folder inside source code.
//In this case ./src/lib/
gulp.task("bower:copyfiles", function(cb)
return gulp.src(mainBowerFiles())
.pipe(gulp.dest('./src/lib'))
cb();
);
//This task is the one wich insert the script tag into
// HTML file. In this case is index.html and is in root
gulp.task('bower:insertfiles', function(cb)
return gulp.src('./src/index.html') //file with tags for injection
.pipe(inject(gulp.src(['./src/lib/*.js', './src/lib/*.css'], read: false),
starttag: '<!-- bower:ext -->',
endtag: '<!-- endbower -->',
relative:true
))
.pipe(gulp.dest('./src')); //where index.html will be saved. Same dir for overwrite old one
)
//And this task will launch the process of copy and include into index.html
gulp.task('bower:buildlib', function(cb)
runSequence('bower:copyfiles', 'bower:insertfiles',cb);
)
现在我们已经完成了一半的过程，我们需要将标签插入到 index.html 中，让 gulp 知道必须在哪里包含内容
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- bower:css -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</body>
</html>
最后一步是在命令行中运行我们的任务
gulp bower:buildlib
注意事项：
已知某些使用 bower 安装的库具有不同的文件配置。 f.e.：当您安装引导程序时，不包含 css 文件，因为内部 bower.json（在 bower_components 上的库文件夹中或您拥有的任何内容中）是以这种方式设置的。您可以在项目根目录的 bower.json 中覆盖这些选项来解决这个问题，像这样添加它（相同的引导示例）：
"overrides":
"bootstrap":
"main":[
"dist/js/bootstrap.js",
"dist/css/bootstrap.min.css",
"less/bootstrap.less"
]
通过这种方式，您可以设置包含哪些文件，哪些不包含。
【讨论】：
【参考方案2】：我这样解决了这个问题：
gulp.task('move', ['yourDependencies'], function()
gulp.src(['bower_components/*.js', 'bower_components/somefile'],
base:'.bower_components/somepath'
)
.pipe(gulp.dest(build/vendor/);
基本选项定义文件的基本目录（这意味着它不会在构建文件夹中创建相同的目录）。更多解释请访问：Why does gulp.src not like being passed an array of complete paths to files?
我不知道如何将 .jade - 文件转换为 .html 文件（对不起）。
注入问题可以通过 gulp-inject 插件解决： https://www.npmjs.com/package/gulp-inject
对不起我的英语不好:-)
【讨论】：
我不想一个接一个地添加文件。并且使用像“*.js”这样的正则表达式将匹配所有的javascript（min、src、dist），我想避免它以上是关于如何配置 Gulp 任务以复制 bower 资源的主要内容，如果未能解决你的问题，请参考以下文章