Geek Answers Handbook

How to set up a Gulp task to copy resources

What is the correct way to copy memory resources using gulp.

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

  • Transforme / src / index.jade in /build/index.html
  • Copying column resources to / build / vendor / *
  • Copy my resources to / build / css, js, assets.
  • Enter these resources (my and bower's) in index.html

I am having problems with "font awesome" because they refer to resources (.ttf, .otf ...) in font-awesome.css: "../font/fontawesome-webfont.ttf"

I tried using wiredep which copied js and css to / vendor (without folder structure) and didn't copy the fonts.

I also tried main-bower files, which also copied all resources (and fonts) to the / vendor folder, but also without an internal structure

And tried with bowerNormalizer, which create a folder structure, for example, "/ vendor / font-awesome //" (not valid either)

And finally, I tried with gulp -bower files that copied all the bower files (min, dist, src), which is wrong and

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

+4
source share
2 answers

Another approach:

what you installed:

  • gulp
  • introductory sequence
  • master bower files
  • gulp -inject

If you do not want, you can install with npm as:

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

Saving dependencies in html file

After that, we start setting up 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 the process, we need to insert the tags in index.html so that gulp knows where it should include 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>

-

gulp bower:buildlib

:

, , bower, . f.e.: bootstrap, css , bower.json( bower_components - , ) . bower.json , ( ):

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

, , .

+6

:

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

: -)

+3

More articles:


All Articles