grunt自动刷新liveload

需要的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、模板引用，移除调试代码