grunt自动刷新liveload

chentian888

墨衍会员 · AI 创作全网分发码龄11年

关注

原创最新推荐文章于 2026-05-13 10:41:48 发布 987 阅读 AI 写同款· GEO 优化 ›

前端构建实践03：用 livereload 即时查看前端更改介绍了一个能自动监视源文件的改变并自动刷新浏览器实现实时预览效果的Grunt插件。阅读详情

需要的grunt插件

grunt-contrib-watch
grunt-contrib-connect
connect-livereload
serve-static
serve-index
connect

优点：
* 自动搭建静态文件服务器，不需在自己电脑上搭建Web服务器。
* 不需要浏览器插件的支持（不现定于某个浏览器）。
* 不需要给网页手动添加livereload.js。
缺点：
* 对于刚接触的人，配置略显复杂。

1.grunt-contrib-connect

作用：启动连接的Web服务器，是主要插件

2.connect-livereload

作用：页面自动刷新
使用connect-livereload模块，生成一个与LiveReload脚本(connect-livereload相当于浏览器的liveload插件，这里要用到中间件middleware)
插件会向页面中插入<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"></script>
通过LiveReload脚本，让页面重新加载。
使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件

3.serve-static

作用：创建静态文件服务器
启用静态服务,创建一个新的中间件功能来从给定的根目录中提供文件

4.serve-index

作用：提供列表的页面，启用目录浏览
提供包含给定路径的目录列表的页面(当页面启用静态服务并自动打开浏览器的情况下，会在浏览器中自动展示当前目录下所有文件的列表)

5.connect

作用：粘合各种“中间件”一起来处理请求
连接，Connect是一个简单的框架，可以将各种“中间件”粘合在一起来处理请求，Connect是使用称为中间件的 “插件” 的节点的可扩展HTTP服务器框架。

var app = require('connect');
app.use(' / foo ', function fooMiddleware(req, res, next) {
    //req.url以“/ foo”开头 
    //req是Node.js http请求对象 
    //res是Node.js的http响应对象 
    //next是一个调用来调用下一个中间件的函数 
    next();
})

在服务器中实际使用Connect应用。该.listen() 方法是启动HTTP服务器的方便（并且与您正在运行的Node.js版本中http.Server的listen方法相同）。
var server = app.listen(port);等于var server = http.createServer(app);

6.Gruntfile.js的配置(复制粘贴即可用)

module.exports = function (grunt) {
    var serveStatic = require('serve-static'); //启用静态服务,创建一个新的中间件功能来从给定的根目录中提供文件
    var serveIndex = require('serve-index'); //提供包含给定路径的目录列表的页面(当页面启用静态服务并自动打开浏览器的情况下，会在浏览器中自动展示当前目录下所有文件的列表)
    //var app = require('connect');//连接，Connect是一个简单的框架，可以将各种“中间件”粘合在一起来处理请求，Connect是使用称为中间件的 “插件” 的节点的可扩展HTTP服务器框架。
    //app.use(' / foo ', function fooMiddleware(req, res, next) {
        //  req.url以“/ foo”开头 
        //  req是Node.js http请求对象 
        //  res是Node.js的http响应对象 
        //  next是一个调用来调用下一个中间件的函数 
        //next();
    //})
    //在服务器中实际使用Connect应用。 该.listen() 方法是启动HTTP服务器的方便（ 并且与 您正在运行的Node.js版本中http.Server的listen方法相同）。
    //var server = app.listen(port);等于var server = http.createServer(app);

    // 项目配置(任务配置)
    grunt.initConfig({
        // 读取我们的项目配置并存储到pkg属性中
        pkg: grunt.file.readJSON('package.json'),
        // 通过connect任务，创建一个静态服务器

        connect: {
            options: {
                port: 9000,
                livereload: 35729,
                open: true,
                hostname: 'localhost',
                base: './'
            },
            livereload: {
                options: {
                    // 使用connect-livereload模块，生成一个与LiveReload脚本(connect-livereload相当于浏览器的liveload插件，这里要用到中间件middleware)
                    // 插件会向页面中插入<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"></script>
                    // 通过LiveReload脚本，让页面重新加载。
                    // 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件
                    middleware: function (connect) {
                        return [
                            // 请求connect-livereload中间件，把脚本注入到静态文件中
                            require('connect-livereload')(),
                            // 静态文件服务器的路径，可以是相对于Gruntfile.js所在目录的相对路径
                            serveStatic('./'),
                            serveIndex('./')
                            // 静态文件服务器的路径(老版本)connect.static(options.base[0])
                            // 启用目录浏览(相当于IIS中的目录浏览)(老版本)connect.directory(options.base[0])
                        ];
                    }
                }
            }
        },
        sass: {
            dist: {
                files: {
                    'css/style.css': 'css/style.scss'
                },
                options: {
                    style: 'compact'
                }
            }
        },
        // 通过watch任务，来监听文件是否有更改
        watch: {
            client: {
                // 监听到变化之后从新在页面中写入livereload
                options: {
                    livereload: true
                },
                // '**' 表示包含所有的子目录
                // '*' 表示包含所有的文件
                files: ['*.html', 'css/**/*.scss', 'images/**/*', 'css/*.css'],
                tasks: ['sass', 'connect']
            }
        }
    }); // grunt.initConfig配置完毕

    // 加载插件
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');

    // 自定义任务
    grunt.registerTask('live', ['connect', 'watch']);
};

看到如下提示，说明Web服务器搭建完成，并且开始监听任务：

Running "connect:livereload" (connect) task
Started connect web server on localhost:8000

Running "watch" task
Waiting...

注：执行该命令前，如果你有安装过LiveReload的浏览器插件，必须关闭。

注意在网上的好多配置中都是用的老版配置，可能会导错误或页面打不开的情况
grunt-contrib-connect 0.11.x 版本开始，静态文件服务器的创建，需要安装 serve-static 插件支持，否则会出现错误提示“connect.static is not a function Use.” 另外，启用目录浏览，也需要独立安装 serve-index 插件才能支持。

//由于以上配置方式导致在监听文件变动时编译速度有点慢，下面将wach任务分解一下，这样在执行watch任务是不必监听每一项任务，只监听变动的文件，并执行刷新任务
       watch: {
            sass: {
                files: ['css/*.scss'],
                tasks: ['sass'],
                options: {
                    livereload: true
                }
            },
            html: {
                files: ['*.html','teacher/*.html','students/*.html'],
                options: {
                    livereload: true
                }
            },
            image: {
                files: ['images/**/*.{png,jpg,gif}'],
                options: {
                    livereload: true
                }
            },
            css: {
                files: ['css/*.css'],
                options: {
                    livereload: true
                }
            }
        }

7.Grunt常用插件及示例说明

插件	作用
load-grunt-tasks	使用通配符加载所有任务
time-grunt	显示运行任务的执行时间
grunt-contrib-watch	文件发生改变运行任务
grunt-contrib-clean	清空文件和文件夹
grunt-contrib-copy	复制文件和文件夹
grunt-contrib-concat	连接、合并文件
grunt-contrib-cssmin	CSS文件压缩
grunt-contrib-uglify	JS文件压缩
grunt-autoprefixer	添加前缀依赖
grunt-contrib-htmlmin	HTML文件）压缩
grunt-contrib-imagemin	图片压缩
grunt-usemin	更新文件路径
grunt-svgstore	从指定文件夹合并svg
grunt-csscomb	CSS格式化
grunt-text-replace	使用字符串、正则、函数替换内容
grunt-html-build	HTML文件增加js、css、模板引用，移除调试代码