How to configure Gulp task to copy bower resources

Question

What is the right way to copy bower resources using gulp.

I want a task "build" (for dev) that will:

Transforme /src/index.jade to /build/index.html
Copy bower resources to /build/vendor/*
Copy my resources to /build/css, js, assets
Inject this resources (my and bower's) in index.html

I'm having trouble with "font awesome", because they resources (.ttf, .otf...) are referenced in font-awesome.css as: "../font/fontawesome-webfont.ttf"

I tried with wiredep, that copied js and css to /vendor (no folder structure) and did not copied the fonts.

I also tried with main-bower-files, that also copied all resources (and fonts) to /vendor folder but also with no inner structure

And tried with bowerNormalizer, that create a folder structure like "/vendor/font-awesome//" (invalid too)

And, finally, tried with gulp-bower-files, that copied all bower files (min, dist, src), that is not right also

PS: I don't want min/uglify/concat right now. This things will be done later, at "dist" task

ibsenleo ibsenleo · Accepted Answer · 2016-03-16T21:19:10

Another approachment:

suposing you have installed:

gulp
run-sequence
main-bower-files
gulp-inject

if you dont, you can install with npm like:

npm install gulp run-sequence main-bower-files gulp-inject --save-dev

Saving your dependencies into html file

Once you have it we start to configure the gulp tasks

//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);
})

Now we have half process, we need to insert the tags into index.html to let gulp know where has to include the content

<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>

and the last step is run our task in command line

gulp bower:buildlib

Notes:

Is known some libraries installed with bower has different file configuration. f.e.: when you install bootstrap, css files are not included because inside bower.json (in the library folder on bower_components or whatever you have) is set in that way. You can fix this overwriting these options in the bower.json on your project root directory adding it like this (same bootstrap example):

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

this way you set wich files are going to be include and wich ones not.

How to configure Gulp task to copy bower resources

2 Answers

Saving your dependencies into html file

Notes: