Grunt plug-in livereload implementation of automatic page refresh, WYSIWYG editing

Scenario One: Grunt-livereload + Chrome Plug-in

Advantages: Simple and convenient installation and configuration.
Disadvantage: need to cooperate with the specified browser plugin (Firefox also has relevant plug-ins, ie, you understand).

1. Need to install 2 mating parts: Grunt-contrib-watch, Connect-livereload

Execute command: NPM install--save-dev grunt-contrib-watch connect-livereload

2. Install the browser plugin: Chrome livereload

3. Configure a Web server (iis/apache), livereload need to run in the local server environment (support for file:///file path is not very good).

4. Modify the Gruntfile.js file:

module.exports = function(grunt) {    // 项目配置(任务配置)    grunt.initConfig({        pkg: grunt.file.readJSON(‘package.json‘),        watch: {            client: {                files: [‘*.html‘, ‘css/*‘, ‘js/*‘, ‘images/**/*‘],                options: {                    livereload: true                }            }        }    });    // 加载插件    grunt.loadNpmTasks(‘grunt-contrib-watch‘);    // 自定义任务    grunt.registerTask(‘live‘, [‘watch‘]);};

5. Execution: Grunt Live

See the following tips to indicate that you have started the Monitoring task:
Running "Watch" task
Waiting ...

6. Open our page, for example: http://localhost/

7. Click on the Chrome Livereload plugin icon and the small dot in the center of the icon Circle becomes solid, indicating that the plug-in execution was successful. At this time you change the website file to see, is not real-time update?

Scenario Two: Grunt-contrib-watch + grunt-contrib-connect + grunt-livereload

Advantages: Automatically set up a static file server, do not need to build a Web server on their own computer.
　　　Browser plugin support is not required (not currently available in a browser).
You do not need to add livereload.js to the page manually.
Cons: The configuration is slightly more complex for people who are just touching.

1. Install the 3 plugins we need: Grunt-contrib-watch, Grunt-contrib-connect, Connect-livereload

Execute command: NPM install--save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload

2. Modify the Gruntfile.js file:

module.exports = function(grunt) {    // LiveReload的默认端口号，你也可以改成你想要的端口号    varlrPort = 35729;    // 使用connect-livereload模块，生成一个与LiveReload脚本    // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>    varlrSnippet = require(‘connect-livereload‘)({ port: lrPort });    // 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件    varlrMiddleware = function(connect, options) {        return[            // 把脚本，注入到静态文件中            lrSnippet,            // 静态文件服务器的路径            connect.static(options.base[0]),            // 启用目录浏览(相当于IIS中的目录浏览)            connect.directory(options.base[0])        ];    };    // 项目配置(任务配置)    grunt.initConfig({        // 读取我们的项目配置并存储到pkg属性中        pkg: grunt.file.readJSON(‘package.json‘),        // 通过connect任务，创建一个静态服务器        connect: {            options: {                // 服务器端口号                port: 8000,                // 服务器地址(可以使用主机名localhost，也能使用IP)                hostname: ‘localhost‘,                // 物理路径(默认为. 即根目录) 注：使用‘.‘或‘..‘为路径的时，可能会返回403 Forbidden. 此时将该值改为相对路径 如：/grunt/reloard。                base: ‘.‘            },            livereload: {                options: {                    // 通过LiveReload脚本，让页面重新加载。                    middleware: lrMiddleware                }            }        },        // 通过watch任务，来监听文件是否有更改        watch: {            client: {                // 我们不需要配置额外的任务，watch任务已经内建LiveReload浏览器刷新的代码片段。                options: {                    livereload: lrPort                },                // ‘**‘ 表示包含所有的子目录                // ‘*‘ 表示包含所有的文件                files: [‘*.html‘, ‘css/*‘, ‘js/*‘, ‘images/**/*‘]            }        }    }); // grunt.initConfig配置完毕    // 加载插件    grunt.loadNpmTasks(‘grunt-contrib-connect‘);    grunt.loadNpmTasks(‘grunt-contrib-watch‘);    // 自定义任务    grunt.registerTask(‘live‘, [‘connect‘, ‘watch‘]);};

5. Execution: Grunt Live

See the following tips to show that the Web server is set up and listening for tasks:
Running "Connect:livereload" (Connect) Task
Started Connect Web server on 127.0.0.1:8000.

Running "Watch" task
Waiting ...

Note: Before executing this command, if you have a browser plugin that has Livereload installed, you must close it.

6. Open our page, for example: Http://localhost:8000/or Http://127.0.0.1:8000/
Note: The local server address opened here is the static file server address that we just built via connect, not the Web server address you built yourself with IIS or Apache.

7. Start the experience.

Grunt plug-in livereload implementation of automatic page refresh, WYSIWYG editing