使用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運行