Copy bower installed components to dist folder.
Install this grunt plugin next to your project's Gruntfile.js with: npm install grunt-bower
Then add this line to your project's grunt.js
gruntfile:
grunt.loadNpmTasks('grunt-bower');
To your Gruntfile.js, add:
bower: {
dev: {
dest: 'dest/path'
}
}
Add stripAffix option if you'd like to have lib names with its file type affix to be stripped, things like /\.js$/
, /js$/
or /\.css$/
etc.:
bower: {
dev: {
dest: 'dest/path',
options: {
stripAffix: true
}
}
}
stripAffix
could cause name confliction, use with caution!
If you were using grunt-bower
prior to v0.9.0, stripJsAffix
is now an alias to stripAffix
option.
If you want to assign different destination folder for other file types:
bower: {
dev: {
dest: 'dest/',
js_dest: 'dest/js',
css_dest: 'dest/styles'
}
}
File types without a [file_type]_dest
will go to dest
folder.
Note: fonts_dest
is a special case, svg
, eot
, ttf
, woff
, woff2
, otf
, are all covered by fonts_dest
for convenience.
Note: images_dest
is another special case, 'jpeg', 'jpg', 'gif', 'png', are all covered by images_dest
for convenience.
If you want to have more specific dest
options for certain packages:
bower: {
dev: {
dest: 'public/',
css_dest: 'public/styles',
options: {
packageSpecific: {
bootstrap: {
dest: 'public/fonts',
css_dest: 'public/css/bootstrap'
}
}
}
}
}
If grunt-bower
not copying the files you want:
bower: {
dev: {
dest: 'public/',
options: {
packageSpecific: {
'typeahead.js': {
files: [
"dist/typeahead.bundle.js"
]
}
}
}
}
}
You can ignore some packages if you don't want them to be copied:
bower: {
dev: {
dest: 'public/',
options: {
ignorePackages: ['jquery']
}
}
}
If you want the exported files to be organized by package, use expand
option. For example, such config will result in the file structure like this:
bower: {
dev: {
dest: 'public/vendor/',
options: {
expand: true
}
}
}
/public
/vendor
/package1
package1_file1.js
package1_file2.js
package1.css
/package2
package2.js
package2.css
Or organized by file type in addition:
bower: {
dev: {
dest: 'public/',
js_dest: 'public/js/'
css_dest: 'public/css/',
fonts_dest: 'public/fonts/', //covers font types ['svg','eot', 'ttf', 'woff', 'woff2', 'otf']
images_dest: 'public/images/', //covers image types ['jpeg', 'jpg', 'gif', 'png']
options: {
expand: true
}
}
}
/public
/js
/package1
package1_file1.js
package1_file2.js
/package2
package2.js
/css
/package1
package1.css
/package2
package2.css
For file path expansion (globbing):
bower: {
dev: {
options: {
packageSpecific: {
'jquery-ui': {
keepExpandedHierarchy: true,
stripGlobBase: true,
files: [
'ui/minified/jquery-ui.min.js',
'themes/base/minified/**'
]
}
}
}
}
}
keepExpandedHierarchy
default to true (for all dependencies), you have to explicitly set it to false
if you want a flattened output structure.
Set stripGlobBase
to true if you only want to keep the expanded part in the globbing pattern. If you want flattening for all packages do:
bower: {
dev: {
options: {
keepExpandedHierarchy: false
}
}
}
Type: Function(content, srcpath)
This option is passed to grunt.file.copy
as an advanced way to control the file contents that are copied.
bower: {
dev: {
options: {
process: function (content, srcpath) {
return content.replace(/[sad ]/g,"_");
},
},
},
},
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Copyright (c) 2012 curist Licensed under the MIT license.