使用Grunt增加 live reload

新建 package.json

{

    "name": "test_connect",
    "version": "0.0.1",
    "devDependencies": {
        "grunt-contrib-connect": "~0.6.0",
        "grunt-contrib-watch": "~0.5.3",
        "load-grunt-tasks": "~0.3.0"
    }

}

新建 Gruntfile.js

module.exports = function(grunt){
 
    require('load-grunt-tasks')(grunt); //加载所有的任务
    //require('time-grunt')(grunt); 如果要使用 time-grunt 插件
 
    grunt.initConfig({
        connect: {
            options: {
                port: 9000,
                hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
                livereload: 35729  //声明给 watch 监听的端口
            },
 
            server: {
                options: {
                    open: true, //自动打开网页 http://
                    base: [
                        'manager'  //主目录
                    ]
                }
            }
        },
 
        watch: {
            livereload: {
                options: {
                    livereload: '<%=connect.options.livereload%>'  //监听前面声明的端口  35729
                },
 
                files: [  //下面文件的改变就会实时刷新网页
                    'manager/*.html',
                    'manager/style/{,*/}*.css',
                    'manager/scripts/{,*/}*.js',
                    'manager/images/{,*/}*.{png,jpg}'
                ]
            }
        }
    });
 
    grunt.registerTask('serve', [
        'connect:server',
        'watch'
    ]);
}

使用npm install 下载 grunt运行环境

使用grunt serve运行