Menu
What is the right way to copy bower resources using gulp.
I want a task "build" (for dev) that will:
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
978
I solved this problem like this:
gulp.task('move', ['yourDependencies'], function(){
gulp.src(['bower_components/*.js', 'bower_components/somefile'], {
base:'.bower_components/somepath'
})
.pipe(gulp.dest(build/vendor/);
}
the base options defines the base dir of the file (that means it will not create the same dirs in the build folder). For more explanations visit: Why does gulp.src not like being passed an array of complete paths to files?
I do not know how to transform .jade - files into .html files (i'm sorry).
The inject thing can be solved with the gulp-inject plugin: https://www.npmjs.com/package/gulp-inject
Sorry for my bad english :-)
36
Another approachment:
suposing you have installed:
if you dont, you can install with npm like:
npm install gulp run-sequence main-bower-files gulp-inject --save-dev
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
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.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
