使用Grunt增加 live reload

来源：互联网发布：php微信订餐系统源码编辑：程序博客网时间：2024/06/04 19:07

新建 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运行

0 0