如何配置 Gulp 任务以复制 bower 资源答案

【问题标题】：How to configure Gulp task to copy bower resources如何配置 Gulp 任务以复制 bower 资源
【发布时间】：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”任务中完成

【问题讨论】：

标签： gulp bower font-awesome

【解决方案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），我想避免它