使用Grunt增加 live reload

最新推荐文章于 2024-09-01 07:33:52 发布

转载最新推荐文章于 2024-09-01 07:33:52 发布 · 414 阅读

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Grunt搭建本地开发服务器，并实现文件修改后的自动刷新功能。通过配置package.json和Gruntfile.js，可以轻松启动一个监听指定文件变化并即时更新浏览器显示的服务。

新建 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'
    ]);
}