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) taskStarted connect web server on localhost:8000Running "watch" taskWaiting...

注：执行该命令前，如果你有安装过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、模板引用，移除调试代码