logo标签列表

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

gulpbowerfont-awesome
4

如何使用gulp正确地复制bower资源。

我想要一个“build”任务（用于开发），它将执行以下操作：

  • 将/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”任务中完成。

2个回答
6

另一种方法：

假设您已经安装了：

  • gulp
  • run-sequence
  • main-bower-files
  • 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);
})

现在我们已经完成了一半的进程，我们需要将标签插入到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安装的某些库具有不同的文件配置。例如：当您安装Bootstrap时，CSS文件未包含在内，因为在bower.json中（位于bower_components或其他位置的库文件夹中）是这样设置的。您可以通过在项目根目录中添加bower.json并像以下示例一样将其覆盖来解决此问题（以Bootstrap为例）： 

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

通过这种方式，您可以设置哪些文件将被包含在内，哪些不会。

4
我这样解决了这个问题：
gulp.task('move', ['yourDependencies'], function(){
    gulp.src(['bower_components/*.js', 'bower_components/somefile'], {
        base:'.bower_components/somepath'
    })
    .pipe(gulp.dest(build/vendor/);
}

基本选项定义了文件的基础目录（这意味着它不会在构建文件夹中创建相同的目录）。有关更多解释，请访问：为什么gulp.src不喜欢传递完整路径数组？ 我不知道如何将.jade文件转换为.html文件（很抱歉）。
使用gulp-inject插件可以解决注入问题：https://www.npmjs.com/package/gulp-inject 对我的糟糕英语表示抱歉 :-)
我不想一个一个地添加文件。使用类似 "*.js" 的正则表达式将与所有 JavaScript 文件（min、src、dist）匹配，而我想要避免这种情况。 - Falci
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接