Grunt环境部署_4

（本文是基于HKUST的NodeJS课程Grunt部分的学习笔记）

之前已经完成了grunt主要的部署工作，能够应对大多数情况下的需求。这里我将追加一个实时更新的功能模块。该功能将占用一个端口，并监听部分文件的变动，若发生变动（保存为准），则运行grunt指令（并非之前的发布指令），执行之前的build工作后，再重新在浏览器中加载网页。在开发中，该功能一般由程序员手动刷新来实现。而且，对于大部分电脑，build工作将花费一些时间。

第一步，添加Module：

npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-connect --save-dev

第二步，添加Task与grunt指令：

watch: {
    copy: {
        files: ['app/**', '!app/**/*.css', '!app/**/*.js'],
        tasks: ['build']
    },
    scripts: {
        files: ['app/scripts/angular.js'],
        tasks: ['build']
    },
    styles: {
        files: ['app/styles/myCss.css'],
        tasks: ['build']
    },
    livereload: {
        options: {
            livereload: '<%= connect.options.livereload %>'
        },
        files: ['app/{,*/}*.html', '.tmp/styles/{,*/}*.css', 'app/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}']
    }
},
connect: {
    options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 27837
    },
    dist: {
        options: {
            open: true,
            base: {
                path: 'dist',
                options: {
                    index: 'index.html',
                    maxAge: 300000
                }
            }
        }
    }
},

grunt.registerTask('serve',['build','connect:dist','watch']);

完成配置后，在一级目录下运行下述指令即可：

grunt serve

尝试修改index.html，可发现浏览器实时更新你的更改。

至此，Grunt部署笔记全部结束。感谢Jogesh教授的指导。