Question

使用gulp复制bower资源的正确方法是什么。

我想要一个任务“build”（对于dev），它将：

Transforme /src/index.jade到/build/index.html
将bower资源复制到/ build / vendor / *
将我的资源复制到/ build / css，js，assets
在index.html

我遇到“font awesome”的问题，因为他们的资源（.ttf，.otf ...）在font-awesome.css中引用为：“../ font / fontawesome-webfont.ttf”< / p>

我尝试使用wiredep，将js和css复制到/ vendor（没有文件夹结构）并且没有复制字体。

我也尝试过使用main-bower文件，它还将所有资源（和字体）复制到/ vendor文件夹，但也没有内部结构

尝试使用bowerNormalizer，创建一个像“/ vendor / font-awesome //”这样的文件夹结构（也是无效的）

最后，尝试使用gulp-bower文件，复制了所有的bower文件（min，dist，src），这也是不对的

PS：我现在不想要min / uglify / concat。这件事情将在稍后的“dist”任务中完成

Answer 1

另一种方法：

假装你已安装：

吞
运行序列
主亭子-文件
吞掉-注入

如果你不这样做，可以使用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。：当你安装bootstrap时，不包括css文件，因为在bower.json中（在bower_components上的库文件夹中或你拥有的任何东西）都以这种方式设置。你可以修改这个在你的项目根目录下的bower.json中覆盖这些选项，像这样添加它（相同的bootstrap示例）：

"overrides":{
    "bootstrap":{
      "main":[
      "dist/js/bootstrap.js",
      "dist/css/bootstrap.min.css",
      "less/bootstrap.less"
      ]
    }
}

这样你就可以设置包含文件而不包含文件。

Answer 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

抱歉我的英文不好： - ）

如何配置Gulp任务来复制bower资源

2 个答案:

将依赖项保存到html文件

说明：