如何配置Gulp任务以复制bower资源_Gulp_Bower_Font Awesome

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

gulp

如何配置Gulp任务以复制bower资源,gulp,bower,font-awesome,Gulp,Bower,Font Awesome,使用gulp复制bower资源的正确方法是什么我想要一个任务“构建”（针对开发人员），它将：将/src/index.jade转换为/build/index.html 将bower资源复制到/构建/供应商/* 将我的资源复制到/build/css、js和assets 将这些资源（my和bower的）注入index.html 我在使用“font awesome”时遇到了问题，因为它们的资源（.ttf、.otf…）在font-awesome.css中被引用为：“../font/fontawes

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

我想要一个任务“构建”（针对开发人员），它将：

将/src/index.jade转换为/build/index.html
将bower资源复制到/构建/供应商/*
将我的资源复制到/build/css、js和assets
将这些资源（my和bower的）注入index.html

我在使用“font awesome”时遇到了问题，因为它们的资源（.ttf、.otf…）在font-awesome.css中被引用为：“../font/fontawesome webfont.ttf”

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

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

并尝试使用bowerNormalizer，它创建了一个文件夹结构，如“/vendor/font awesome/”（也无效）

最后，尝试使用gulp bower文件，复制所有bower文件（min、dist、src），这也不正确

附言：我现在不想要min/uglify/concat。这些事情将在以后完成，在“dist”任务中，我这样解决了这个问题：

gulp.task('move', ['yourDependencies'], function(){
    gulp.src(['bower_components/*.js', 'bower_components/somefile'], {
        base:'.bower_components/somepath'
    })
    .pipe(gulp.dest(build/vendor/);
}

基本选项定义文件的基本目录（这意味着它不会在生成文件夹中创建相同的目录）。有关更多说明，请访问：

我不知道如何将.jade文件转换为.html文件（很抱歉）

使用gulp inject插件可以解决注入问题：

对不起，我的英语不好：-）

另一种方法：

如果您已安装：

吞咽
运行顺序
主鲍尔文件
大口注射

如果不需要，可以使用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);
})

笔记：众所周知，与bower一起安装的某些库具有不同的文件配置。f、 e:安装引导程序时，不包括css文件，因为bower.json内部（位于bower_组件上的库文件夹或任何您拥有的文件夹中）是以这种方式设置的。您可以通过在项目根目录上的bower.json中覆盖这些选项来修复此问题，如下添加（相同的引导示例）：

通过这种方式，您可以设置哪些文件将包括哪些文件，哪些文件不包括。

我不想逐个添加这些文件。使用类似“*.js”的正则表达式将与所有javascript（min、src、dist）匹配，我希望避免使用它

<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

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