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.

238 lines
6.8 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.copy
  49. Type: `Boolean`
  50. Default value: `true`
  51. Copy Bower packages to target directory.
  52. #### options.cleanup
  53. Type: `boolean`
  54. Default value: `undefined`
  55. **NOTE:** If set to true or false then both `cleanBowerDir` & `cleanTargetDir` are set to the value of `cleanup`.
  56. #### options.layout
  57. Type: `string` or `function`
  58. Default value: `byType`
  59. There are two built-in named layouts: `byType` and `byComponent`.
  60. `byType` layout will produce the following structure:
  61. ```
  62. lib
  63. |-- js
  64. | |- bootstrap
  65. | \- require
  66. |-- css
  67. \- bootstrap
  68. ```
  69. where `js`, `css` come from `exportsOverride` section described below.
  70. `byComponent` will group assets by type under component name:
  71. ```
  72. lib
  73. |-- bootstrap
  74. | |- js
  75. | \- css
  76. |-- require
  77. \- js
  78. ```
  79. If you need to support custom layout then you can specify `layout` as a function of `type` and `component`:
  80. ```js
  81. var path = require('path');
  82. grunt.initConfig({
  83. bower: {
  84. install: {
  85. options: {
  86. layout: function(type, component) {
  87. var renamedType = type;
  88. if (type == 'js') renamedType = 'javascripts';
  89. else if (type == 'css') renamedType = 'stylesheets';
  90. return path.join(component, renamedType);
  91. }
  92. }
  93. }
  94. }
  95. });
  96. ```
  97. #### options.verbose
  98. Type: `boolean`
  99. Default value: `false`
  100. 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.
  101. ### Usage Examples
  102. #### Default Options
  103. 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.
  104. ```js
  105. grunt.initConfig({
  106. bower: {
  107. install: {
  108. options: {
  109. targetDir: './lib',
  110. layout: 'byType',
  111. install: true,
  112. verbose: false,
  113. cleanTargetDir: false,
  114. cleanBowerDir: false
  115. }
  116. }
  117. },
  118. })
  119. ```
  120. #### Custom Options
  121. In this initial version there are no more options in plugin itself. **BUT!**
  122. ### Advanced usage
  123. At this point of time "Bower package" = "its git repository". It means that package includes tests, licenses, etc.
  124. Bower's community actively discusses this issue (GitHub issues [#46][],[#88][], [on Google Groups][GG])
  125. That's why you can find such tools like [blittle/bower-installer][] which inspired this project.
  126. [GG]: https://groups.google.com/forum/?fromgroups=#!topic/twitter-bower/SQEDDA_gmh0
  127. [#88]: https://github.com/twitter/bower/issues/88
  128. [#46]: https://github.com/twitter/bower/issues/46
  129. [blittle/bower-installer]: https://github.com/blittle/bower-installer
  130. Okay, if you want more than `"main"` files in `./lib` directory then put `"exportsOverride"` section into your `component.json`:
  131. ```json
  132. {
  133. "name": "simple-bower",
  134. "version": "0.0.0",
  135. "dependencies": {
  136. "jquery": "~1.8.3",
  137. "bootstrap-sass": "*",
  138. "requirejs": "*"
  139. },
  140. "exportsOverride": {
  141. "bootstrap-sass": {
  142. "js": "js/*.js",
  143. "scss": "lib/*.scss",
  144. "img": "img/*.png"
  145. },
  146. "requirejs": {
  147. "js": "require.js"
  148. }
  149. }
  150. }
  151. ```
  152. `grunt-bower-task` will do the rest:
  153. * If Bower package has defined `"main"` files then they will be copied to `./lib/<package>/`.
  154. * If `"main"` files are empty then the whole package directory will be copied to `./lib`.
  155. * When you define `"exportsOverride"` only asset types and files specified by you will be copied to `./lib`.
  156. For the example above you'll get the following files in `.lib` directory:
  157. ```
  158. jquery/jquery.js
  159. js/bootstrap-sass/bootstrap-affix.js
  160. ...
  161. js/bootstrap-sass/bootstrap-typeahead.js
  162. js/requirejs/require.js
  163. scss/bootstrap-sass/_accordion.scss
  164. ...
  165. scss/bootstrap-sass/_wells.scss
  166. scss/bootstrap-sass/bootstrap.scss
  167. scss/bootstrap-sass/responsive.scss
  168. img/bootstrap-sass/glyphicons-halflings-white.png
  169. img/bootstrap-sass/glyphicons-halflings.png
  170. ```
  171. ## Contributing
  172. Please, use `devel` branch for all pull requests.
  173. 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][].
  174. ## Release History
  175. * 2013/05/11 - v0.2.3 - Update to bower 0.9.x, docs improvement, Windows-compatible paths in tests.
  176. * 2013/04/23 - v0.2.2 - Fix backward-compatibility issue (related to `cleanup` option).
  177. * 2013/04/22 - v0.2.1 - Split 'install' to 'install' and 'copy' steps to support flexible workflow, add support for grunt's `--base` option.
  178. * 2013/03/30 - v0.2.0 - Added support for flexible assets layout, honor native Bower's configuration, reduce log output.
  179. * 2013/03/18 - v0.1.1 - Updated dependencies, minor fixes.
  180. * 2012/11/25 - v0.1.0 - Initial release.
  181. ## License
  182. Copyright (c) 2012-2013 Ivan Yatskevich
  183. Licensed under the MIT license.
  184. <https://github.com/yatskevich/grunt-bower-task/blob/master/LICENSE-MIT>