Grunt's Watch and Livereload

Now watch has integrated the livereload, so put them together to illustrate.

Watch can monitor specific files, automate custom tasks such as Livereload, and so on when adding files, modifying files, or deleting files.

1. Installation

Project definition on GitHub, address: Https://github.com/gruntjs/grunt-contrib-watch

Can be installed directly via NPM

Install Grunt-contrib-watch--save-dev

After installation, you need to add a registration for the task in Gruntfile.js.

Grunt.loadnpmtasks (' Grunt-contrib-watch ');

Run watch tasks with Grunt watch.

2. Configure Watch

Similar to connect, define your own subtasks under watch, the following example will monitor any *.html file in the SRC directory and output the modified file name after the file has been modified.

This is handled by the event of Watch.

' Use strict ';   function (Grunt) {      //  Project configuration.       grunt.initconfig ({          watch:{            start:{                files: [' src/*.html ']}}    } );    Grunt.event.on (function(action, filepath, target) {          + ': ' + filepath + ' has ' + AC tion);    });     grunt.loadnpmtasks (' Grunt-contrib-watch ');}

We start the Watch task and note that the task is continuously monitored.

PS c:\study\grunt>"watch"  taskwaiting...start:src\index.html has Changed"src\index.html"  changed.   In 0.001s for Sun Sep 14:52:52 gmt+0800 ( China Standard Time)-waiting ...

Here we use the files parameter, which can be a path string or an array of strings as a target for monitoring. The path can be written as a reference: Grunt wildcard

In most cases, we want to perform a specific task directly after a change in the file, such as a file check automatically after modifying the *.js script file. This can be declared directly through tasks.

The jshint here is a JavaScript grammar checker that we'll talk about later, and it's not going to work.

Watch: {  scripts: {    files: [' **/*.js '],    tasks: [' Jshint '  },},

Here we customize a task called Hello.

Tasks is a string of task names or a string array of task names as the task we perform.

' Use strict ';   function (Grunt) {      //  Project configuration.       grunt.initconfig ({          watch:{            start:{                files: [' src/*.html '],                tasks: [' Hello ']            }        }    );    Grunt.registertask (function() {            Grunt.log.writeln (' Hello, World ') );    });    Grunt.loadnpmtasks (' Grunt-contrib-watch ');}

3. Advanced Options

You can configure more detailed settings through the options.

1. Options.spawn

Boolean type, which is true by default. By default, a new child process is created to perform the triggered task. By setting to False, you can make the triggered task share the process context and increase the speed. However, this can cause the monitoring task to crash easily, so try to use this feature to perform the task in the new child process.

Watch: {  scripts: {    files: [' **/*.js '],    tasks: [' Jshint '],    options: {        False,    },  },},

2. Options.interrupt

The Boolean type, which defaults to false. is still related to the process.

When a file is modified, a child process is generated to perform the task, and the default behavior is that for each target, only a new child process is generated to perform the task after the last processing is completed. Setting interrupt to True will cause the previous process to be aborted and a new process to be generated to handle the last change.

Watch: {  scripts:    {' **/*.js ',    tasks: [' Jshint '],    options: {        True,    },  },},

3. Options.debouncedelay

This is an integer-type parameter, and if the same file or path is modified, how long it will take for the event to be triggered. The default is 500 milliseconds.

Watch: {  scripts:    {' **/*.js ',    tasks: [' Jshint '],    options: {       (,   },},},

4. Options.event

String or array, default to ' all '

Specifies the specific event type of the monitoring target, which can be ' all ', ' changed ', ' added ' and ' deleted '.

Watch: {  scripts:    {' **/*.js ',    tasks: [' Generatefilemanifest '],    options: {      Event: [' added ', ' deleted '],},},  },

5. Options.reload

The Boolean type parameter, which defaults to false.

By default, if the gruntfile.js file is monitored, it causes the monitoring task to restart after the file has been modified. and Reload Gruntfile.js.

If reload is set to true, any modifications to the monitored files will cause the monitoring task to restart. Unless your gruntfile.js relies on other files, this parameter is not used.

Watch: {  configfiles: {    ' gruntfile.js ', ' config/*.js ' ],    options: {        True    }}  }

6. Options.forever

The Boolean type parameter, which defaults to true.

This entire task-level parameter cannot be configured on a single target. By default, the monitoring task handles grunt.fatal and grunt.warn, preventing exit monitoring issues that result. If you do not want the monitoring task to overwrite grunt.fatal and Grunt.warn, you can set the forever to false.

Options.atbegin

The Boolean type, which defaults to false.

When the monitoring task starts, the corresponding task is automatically triggered.

7. OPTIONS.CWD

String or object type, default = PROCESS.CWD ()

Sets the current working directory, which defaults to PROCESS.CWD (), which can be set to a directory of strings to define a directory for monitoring and generating subtasks, or an object to describe their own separate paths.

options: {     cwd: {         ' match/files/from/here ',         ' But/spawn/files/from/here '     }} 

4. Livereload

This is the livereload with connect. We'll show them separately.

It is a property of the options, the type is a Boolean, a numeric value, or a configuration object. Default is False

Set to True to set the equivalent to 35729.

In fact, a server that supports reloading is enabled, and the server works on the above port number, which allows the server to obtain a script that notifies the front-end browser to automatically reload the content after the file has been modified.

For example:

Watch: {    css:{' **/*.sass ',    tasks: [' sass '],    options: {      True ,    },  },},

After startup, a server is actually created on the specified port and, if accessed, you can see the returned information.

Visit: http://localhost:35729/

What's returned

{"TINYLR": "Welcome", "Version": "0.0.5"}

If necessary, you can also work on HTTPS, which needs to be configured via key and Cert.

Watch: {  css:    {' **/*.sass ',    tasks: [' sass '],    options: {      livereload: {        9000,        key:grunt.file.read (' Path/to/ssl.key '),        cert:grunt.file.read (' path/to /ssl.crt ')        //  can pass in any other options you ' d like to the HTTPS server, as listed Here:http://nodejs.org/api/tls.html#tls_tls_createserver_options_secureconnectionlistener      }    },  },},

More content can be found on the Enable Livereload on your HTML.

Grunt's Watch and Livereload