You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

229 lines
6.6 KiB

  1. # grunt-bower-task [![Build Status](https://travis-ci.org/yatskevich/grunt-bower-task.png)](https://travis-ci.org/yatskevich/grunt-bower-task)
  2. > Install Bower packages. Smartly.
  3. ## Getting Started
  4. _If you haven't used [grunt][] before, be sure to check out the [Getting Started][] guide._
  5. Please note, this plugin works **only with grunt 0.4+**. If you are using grunt 0.3.x then consider an [upgrade to 0.4][].
  6. From the same directory as your project's [Gruntfile][Getting Started] and [package.json][], install this plugin with the following command:
  7. ```bash
  8. npm install grunt-bower-task --save-dev
  9. ```
  10. Once that's done, add this line to your project's Gruntfile:
  11. ```js
  12. grunt.loadNpmTasks('grunt-bower-task');
  13. ```
  14. If the plugin has been installed correctly, running `grunt --help` at the command line should list the newly-installed plugin's task or tasks. In addition, the plugin should be listed in package.json as a `devDependency`, which ensures that it will be installed whenever the `npm install` command is run.
  15. [grunt]: http://gruntjs.com/
  16. [Getting Started]: https://github.com/gruntjs/grunt/wiki/Getting-started
  17. [package.json]: https://npmjs.org/doc/json.html
  18. [upgrade to 0.4]: https://github.com/gruntjs/grunt/wiki/Upgrading-from-0.3-to-0.4
  19. ## Grunt task for Bower
  20. ### Overview
  21. In your project's Gruntfile, add a section named `bower` to the data object passed into `grunt.initConfig()`.
  22. ```js
  23. grunt.initConfig({
  24. bower: {
  25. install: {
  26. //just run 'grunt bower:install' and you'll see files from your Bower packages in lib directory
  27. }
  28. },
  29. })
  30. ```
  31. ### Options
  32. #### options.targetDir
  33. Type: `String`
  34. Default value: `./lib`
  35. A directory where you want to keep your Bower packages.
  36. ### options.install
  37. Type: `Boolean`
  38. Default value: `true`
  39. Whether you want to run bower install task itself (e.g. you might not want to do this each time on CI server).
  40. ### options.cleanTargetDir
  41. Type: `Boolean`
  42. Default value: `false`
  43. Will clean target dir before running install.
  44. ### options.cleanBowerDir
  45. Type: `Boolean`
  46. Default value: `false`
  47. Will remove bower's dir after copying all needed files into target dir.
  48. #### options.cleanup
  49. Type: `boolean`
  50. Default value: `undefined`
  51. **NOTE:** If set to true or false then both `cleanBowerDir` & `cleanTargetDir` are set to the value of `cleanup`.
  52. #### options.layout
  53. Type: `string` or `function`
  54. Default value: `byType`
  55. There are two built-in named layouts: `byType` and `byComponent`.
  56. `byType` layout will produce the following structure:
  57. ```
  58. lib
  59. |-- js
  60. | |- bootstrap
  61. | \- require
  62. |-- css
  63. \- bootstrap
  64. ```
  65. where `js`, `css` come from `exportsOverride` section described below.
  66. `byComponent` will group assets by type under component name:
  67. ```
  68. lib
  69. |-- bootstrap
  70. | |- js
  71. | \- css
  72. |-- require
  73. \- js
  74. ```
  75. If you need to support custom layout then you can specify `layout` as a function of `type` and `component`:
  76. ```js
  77. var path = require('path');
  78. grunt.initConfig({
  79. bower: {
  80. install: {
  81. options: {
  82. layout: function(type, component) {
  83. var renamedType = type;
  84. if (type == 'js') renamedType = 'javascripts';
  85. else if (type == 'css') renamedType = 'stylesheets';
  86. return path.join(component, renamedType);
  87. }
  88. }
  89. }
  90. }
  91. });
  92. ```
  93. #### options.verbose
  94. Type: `boolean`
  95. Default value: `false`
  96. The task will provide more (debug) output when this option is set to `true`. You can also use `--verbose` when running task for same effect.
  97. ### Usage Examples
  98. #### Default Options
  99. Default options are good enough if you want to install Bower packages and keep only `"main"` files (as specified by package's `component.json`) in separate directory.
  100. ```js
  101. grunt.initConfig({
  102. bower: {
  103. install: {
  104. options: {
  105. targetDir: './lib',
  106. layout: 'byType',
  107. install: true,
  108. verbose: false,
  109. cleanTargetDir: false,
  110. cleanBowerDir: false
  111. }
  112. }
  113. },
  114. })
  115. ```
  116. #### Custom Options
  117. In this initial version there are no more options in plugin itself. **BUT!**
  118. ### Advanced usage
  119. At this point of time "Bower package" = "its git repository". It means that package includes tests, licenses, etc.
  120. Bower's community actively discusses this issue (GitHub issues [#46][],[#88][], [on Google Groups][GG])
  121. That's why you can find such tools like [blittle/bower-installer][] which inspired this project.
  122. [GG]: https://groups.google.com/forum/?fromgroups=#!topic/twitter-bower/SQEDDA_gmh0
  123. [#88]: https://github.com/twitter/bower/issues/88
  124. [#46]: https://github.com/twitter/bower/issues/46
  125. [blittle/bower-installer]: https://github.com/blittle/bower-installer
  126. Okay, if you want more than `"main"` files in `./lib` directory then put `"exportsOverride"` section into your `component.json`:
  127. ```json
  128. {
  129. "name": "simple-bower",
  130. "version": "0.0.0",
  131. "dependencies": {
  132. "jquery": "~1.8.3",
  133. "bootstrap-sass": "*",
  134. "requirejs": "*"
  135. },
  136. "exportsOverride": {
  137. "bootstrap-sass": {
  138. "js": "js/*.js",
  139. "scss": "lib/*.scss",
  140. "img": "img/*.png"
  141. },
  142. "requirejs": {
  143. "js": "require.js"
  144. }
  145. }
  146. }
  147. ```
  148. `grunt-bower-task` will do the rest:
  149. * If Bower package has defined `"main"` files then they will be copied to `./lib/<package>/`.
  150. * If `"main"` files are empty then the whole package directory will be copied to `./lib`.
  151. * When you define `"exportsOverride"` only asset types and files specified by you will be copied to `./lib`.
  152. For the example above you'll get the following files in `.lib` directory:
  153. ```
  154. jquery/jquery.js
  155. js/bootstrap-sass/bootstrap-affix.js
  156. ...
  157. js/bootstrap-sass/bootstrap-typeahead.js
  158. js/requirejs/require.js
  159. scss/bootstrap-sass/_accordion.scss
  160. ...
  161. scss/bootstrap-sass/_wells.scss
  162. scss/bootstrap-sass/bootstrap.scss
  163. scss/bootstrap-sass/responsive.scss
  164. img/bootstrap-sass/glyphicons-halflings-white.png
  165. img/bootstrap-sass/glyphicons-halflings.png
  166. ```
  167. ## Contributing
  168. 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][].
  169. ## Release History
  170. * 2013/04/23 - v0.2.2 - Fix backward-compatibility issue (related to `cleanup` option).
  171. * 2013/04/22 - v0.2.1 - Split 'install' to 'install' and 'copy' steps to support flexible workflow, add support for grunt's `--base` option.
  172. * 2013/03/30 - v0.2.0 - Added support for flexible assets layout, honor native Bower's configuration, reduce log output.
  173. * 2013/03/18 - v0.1.1 - Updated dependencies, minor fixes.
  174. * 2012/11/25 - v0.1.0 - Initial release.
  175. ## License
  176. Copyright (c) 2012-2013 Ivan Yatskevich
  177. Licensed under the MIT license.
  178. <https://github.com/yatskevich/grunt-bower-task/blob/master/LICENSE-MIT>