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.

340 lines
13 KiB

  1. # grunt-contrib-watch [![Build Status](https://travis-ci.org/gruntjs/grunt-contrib-watch.png?branch=master)](https://travis-ci.org/gruntjs/grunt-contrib-watch)
  2. > Run predefined tasks whenever watched file patterns are added, changed or deleted.
  3. ## Getting Started
  4. This plugin requires Grunt `~0.4.0`
  5. If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
  6. ```shell
  7. npm install grunt-contrib-watch --save-dev
  8. ```
  9. Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
  10. ```js
  11. grunt.loadNpmTasks('grunt-contrib-watch');
  12. ```
  13. ## Watch task
  14. _Run this task with the `grunt watch` command._
  15. ### Settings
  16. There are a number of options available. Please review the [minimatch options here](https://github.com/isaacs/minimatch#options). As well as some additional options as follows:
  17. #### files
  18. Type: `String|Array`
  19. This defines what file patterns this task will watch. Can be a string or an array of files and/or minimatch patterns.
  20. #### tasks
  21. Type: `String|Array`
  22. This defines which tasks to run when a watched file event occurs.
  23. #### options.nospawn
  24. Type: `Boolean`
  25. Default: false
  26. This instructs the watch task to not spawn task runs in a child process. Setting this option also speeds up the reaction time of the watch (usually 500ms faster for most) and allows subsequent task runs to share the same context (i.e., using a reload task). Not spawning task runs can make the watch more prone to failing so please use as needed.
  27. Example:
  28. ```js
  29. watch: {
  30. scripts: {
  31. files: ['**/*.js'],
  32. tasks: ['livereload'],
  33. options: {
  34. nospawn: true
  35. }
  36. }
  37. }
  38. ```
  39. #### options.interrupt
  40. Type: `Boolean`
  41. Default: false
  42. As files are modified this watch task will spawn tasks in child processes. The default behavior will only spawn a new child process per target when the previous process has finished. Set the `interrupt` option to true to terminate the previous process and spawn a new one upon later changes.
  43. Example:
  44. ```js
  45. watch: {
  46. scripts: {
  47. files: '**/*.js',
  48. tasks: ['jshint'],
  49. options: {
  50. interrupt: true
  51. }
  52. }
  53. }
  54. ```
  55. #### options.debounceDelay
  56. Type: `Integer`
  57. Default: 500
  58. How long to wait before emitting events in succession for the same filepath and status. For example if your `Gruntfile.js` file was `changed`, a `changed` event will only fire again after the given milliseconds.
  59. Example:
  60. ```js
  61. watch: {
  62. scripts: {
  63. files: '**/*.js',
  64. tasks: ['jshint'],
  65. options: {
  66. debounceDelay: 250
  67. }
  68. }
  69. }
  70. ```
  71. #### options.interval
  72. Type: `Integer`
  73. Default: 100
  74. The `interval` is passed to `fs.watchFile`. Since `interval` is only used by `fs.watchFile` and this watcher also uses `fs.watch`; it is recommended to ignore this option. *Default is 100ms*.
  75. ###### options.event
  76. Type: `String|Array`
  77. Default: `'all'`
  78. Specify the type watch event that trigger the specified task. This option can be one or many of: `'all'`, `'changed'`, `'added'` and `'deleted'`.
  79. Example:
  80. ```js
  81. watch: {
  82. scripts: {
  83. files: '**/*.js',
  84. tasks: ['generateFileManifest'],
  85. options: {
  86. event: ['added', 'deleted']
  87. }
  88. }
  89. }
  90. ```
  91. #### options.forever
  92. Type: `Boolean`
  93. Default: true
  94. This is *only a task level option* and cannot be configured per target. By default the watch task will duck punch `grunt.fatal` and `grunt.warn` to try and prevent them from exiting the watch process. If you don't want `grunt.fatal` and `grunt.warn` to be overridden set the `forever` option to `false`.
  95. #### options.livereload
  96. Type: `Boolean|Number|Object`
  97. Default: false
  98. Set to `true` or set `livereload: 1337` to a port number to enable live reloading. Default and recommended port is `35729`.
  99. If enabled a live reload server will be started with the watch task per target. Then after the indicated tasks have ran, the live reload server will be triggered with the modified files.
  100. Example:
  101. ```js
  102. watch: {
  103. css: {
  104. files: '**/*.sass',
  105. tasks: ['sass'],
  106. options: {
  107. livereload: true,
  108. },
  109. },
  110. },
  111. ```
  112. ### Examples
  113. ```js
  114. // Simple config to run jshint any time a file is added, changed or deleted
  115. grunt.initConfig({
  116. watch: {
  117. files: '**/*',
  118. tasks: ['jshint']
  119. }
  120. });
  121. ```
  122. ```js
  123. // Advanced config. Run specific tasks when specific files are added, changed or deleted.
  124. grunt.initConfig({
  125. watch: {
  126. gruntfile: {
  127. files: 'Gruntfile.js',
  128. tasks: ['jshint:gruntfile'],
  129. options: {
  130. nocase: true
  131. }
  132. },
  133. src: {
  134. files: ['lib/*.js', 'css/**/*.scss', '!lib/dontwatch.js'],
  135. tasks: ['default']
  136. },
  137. test: {
  138. files: '<%= jshint.test.src %>',
  139. tasks: ['jshint:test', 'qunit']
  140. }
  141. }
  142. });
  143. ```
  144. #### Using the `watch` event
  145. This task will emit a `watch` event when watched files are modified. This is useful if you would like a simple notification when files are edited or if you're using this task in tandem with another task, for example a live reload task. Here is a simple example using the `watch` event:
  146. ```js
  147. grunt.initConfig({
  148. watch: {
  149. scripts: {
  150. files: ['lib/*.js'],
  151. tasks: [''],
  152. },
  153. },
  154. });
  155. grunt.event.on('watch', function(action, filepath) {
  156. grunt.log.writeln(filepath + ' has ' + action);
  157. });
  158. ```
  159. **The `watch` event is not intended for replacing the standard Grunt API for configuring and running tasks. If you're trying to run tasks from within the `watch` event you're more than likely doing it wrong. Please read [configuring tasks](http://gruntjs.com/configuring-tasks).**
  160. ##### Compiling Files As Needed
  161. A very common request is to only compile files as needed. Here is an example that will only lint changed files with the `jshint` task:
  162. ```js
  163. grunt.initConfig({
  164. watch: {
  165. scripts: {
  166. files: ['lib/*.js'],
  167. tasks: ['jshint'],
  168. },
  169. },
  170. jshint: {
  171. all: ['lib/*.js'],
  172. },
  173. });
  174. // on watch events configure jshint:all to only run on changed file
  175. grunt.event.on('watch', function(action, filepath) {
  176. grunt.config(['jshint', 'all'], filepath);
  177. });
  178. ```
  179. If you save multiple files simultaneously you may opt for a more robust method:
  180. ```js
  181. var changedFiles = Object.create(null);
  182. var onChange = grunt.util._.debounce(function() {
  183. grunt.config(['jshint', 'all'], Object.keys(changedFiles));
  184. changedFiles = Object.create(null);
  185. }, 200);
  186. grunt.event.on('watch', function(action, filepath) {
  187. changedFiles[filepath] = action;
  188. onChange();
  189. });
  190. ```
  191. #### Live Reloading
  192. Live reloading is built into the watch task. Set the option `livereload` to `true` to enable on the default port `35729` or set to a custom port: `livereload: 1337`.
  193. The simplest way to add live reloading to all your watch targets is by setting `livereload` to `true` at the task level. This will run a single live reload server and trigger the live reload for all your watch targets:
  194. ```js
  195. grunt.initConfig({
  196. watch: {
  197. options: {
  198. livereload: true,
  199. },
  200. css: {
  201. files: ['public/scss/*.scss'],
  202. tasks: ['compass'],
  203. },
  204. },
  205. });
  206. ```
  207. You can also configure live reload for individual watch targets or run multiple live reload servers. Just be sure if you're starting multiple servers they operate on different ports:
  208. ```js
  209. grunt.initConfig({
  210. watch: {
  211. css: {
  212. files: ['public/scss/*.scss'],
  213. tasks: ['compass'],
  214. options: {
  215. // Start a live reload server on the default port 35729
  216. livereload: true,
  217. },
  218. },
  219. another: {
  220. files: ['lib/*.js'],
  221. tasks: ['anothertask'],
  222. options: {
  223. // Start another live reload server on port 1337
  224. livereload: 1337,
  225. },
  226. },
  227. dont: {
  228. files: ['other/stuff/*'],
  229. tasks: ['dostuff'],
  230. },
  231. },
  232. });
  233. ```
  234. ##### Enabling Live Reload in Your HTML
  235. Once you've started a live reload server you'll be able to access the live reload script. To enable live reload on your page, add a script tag before your closing `</body>` tag pointing to the `livereload.js` script:
  236. ```html
  237. <script src="http://localhost:35729/livereload.js"></script>
  238. ```
  239. ##### Using Live Reload with the Browser Extension
  240. Instead of adding a script tag to your page, you can live reload your page by installing a browser extension. Please visit [how do I install and use the browser extensions](http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-) for help installing an extension for your browser.
  241. Once installed please use the default live reload port `35729` and the browser extension will automatically reload your page without needing the `<script>` tag.
  242. ### FAQs
  243. #### How do I fix the error `EMFILE: Too many opened files.`?
  244. This is because of your system's max opened file limit. For OSX the default is very low (256). Temporarily increase your limit with `ulimit -n 10480`, the number being the new max limit.
  245. #### Can I use this with Grunt v0.3?
  246. Yes. Although `grunt-contrib-watch` is a replacement watch task for Grunt v0.4, version `grunt-contrib-watch@0.1.x` is compatible with Grunt v0.3. `grunt-contrib-watch >= 0.2.x` is **only* compatible and recommended to use with Grunt v0.4.
  247. #### Why is the watch devouring all my memory?
  248. Likely because of an enthusiastic pattern trying to watch thousands of files. Such as `'**/*.js'` but forgetting to exclude the `node_modules` folder with `'!node_modules/**/*.js'`. Try grouping your files within a subfolder or be more explicit with your file matching pattern.
  249. #### Why spawn as child processes as a default?
  250. The goal of this watch task is as files are changed, run tasks as if they were triggered by the user themself. Each time a user runs `grunt` a process is spawned and tasks are ran in succession. In an effort to keep the experience consistent and continualy produce expected results, this watch task spawns tasks as child processes by default.
  251. Sandboxing task runs also allows this watch task to run more stable over long periods of time. As well as more efficiently with more complex tasks and file structures.
  252. Spawning does cause a performance hit (usually 500ms for most environments). It also cripples tasks that rely on the watch task to share the context with each subsequent run (i.e., reload tasks). If you would like a faster watch task or need to share the context please set the `nospawn` option to `true`. Just be aware that with this option enabled, the watch task is more prone to failure.
  253. ## Release History
  254. * 2013-05-03   v0.4.0   Option livereload to start live reload servers. Will reload a Gruntfile before running tasks if Gruntfile is modified. Option event to only trigger watch on certain events. Refactor watch task into separate task runs per target. Option forever to override grunt.fatal/warn to help keeping the watch alive with nospawn enabled. Emit a beep upon complete. Logs all watched files with verbose flag set. If interrupt is off, will run the tasks once more if watch triggered during a previous task run. tasks property is optional for use with watch event. Watchers properly closed when exiting.
  255. * 2013-02-28   v0.3.1   Fix for top level options.
  256. * 2013-02-27   v0.3.0   nospawn option added to run tasks without spawning as child processes. Watch emits 'watch' events upon files being triggered with grunt.event. Completion time in seconds and date/time shown after tasks ran. Negate file patterns fixed. Tasks debounced individually to handle simultaneous triggering for multiple targets. Errors handled better and viewable with --stack cli option. Code complexity reduced making the watch task code easier to read.
  257. * 2013-02-15   v0.2.0   First official release for Grunt 0.4.0.
  258. * 2013-01-18   v0.2.0rc7   Updating grunt/gruntplugin dependencies to rc6. Changing in-development grunt/gruntplugin dependency versions from tilde version ranges to specific versions.
  259. * 2013-01-09   v0.2.0rc5   Updating to work with grunt v0.4.0rc5.
  260. * 2012-12-15   v0.2.0a   Conversion to grunt v0.4 conventions. Remove node v0.6 and grunt v0.3 support. Allow watch task to be renamed. Use grunt.util.spawn "grunt" option. Updated to gaze@0.3.0, forceWatchMethod option removed.
  261. * 2012-11-01   v0.1.4   Prevent watch from spawning duplicate watch tasks
  262. * 2012-10-28   v0.1.3   Better method to spawn the grunt bin Bump gaze to v0.2.0. Better handles some events and new option forceWatchMethod Only support Node.js >= v0.8
  263. * 2012-10-17   v0.1.2   Only spawn a process per task one at a time Add interrupt option to cancel previous spawned process Grunt v0.3 compatibility changes
  264. * 2012-10-16   v0.1.1   Fallback to global grunt bin if local doesnt exist. Fatal if bin cannot be found Update to gaze 0.1.6
  265. * 2012-10-08   v0.1.0   Release watch task Remove spawn from helper Run on Grunt v0.4
  266. ---
  267. Task submitted by [Kyle Robinson Young](http://dontkry.com)
  268. *This file was generated on Fri May 03 2013 10:06:32.*