grunt插件之connect-livereload

连接中间件,将livereload脚本添加到响应中。不需要浏览器插件。如果您对浏览器插件感到满意,那么您不需要这个中间件。

安装

npm install connect-livereload --save-dev

使用

注意:如果您使用这个中间件,您应该确保关闭浏览器LiveReload扩展,如果您已安装它。
这个中间件可以与LiveReload模块一起使用,例如grunt-contrib-connectgrunt-contrib-watch

connect-livereload本身不服务于livereload.js脚本。

'use strict'; 
var lrSnippet = require('connect-livereload')({port:35729});
var serveStatic = require('serve-static'); //加载serve-static模块,设置静态文件服务器的路径
var serveIndex = require('serve-index');//加载serve-index模块,启用目录浏览

module.exports=function (grunt) {
    require('load-grunt-tasks')(grunt); 
    require('time-grunt')(grunt)
    
    var config={
        app:'app',  
        dist:'dist', 
        tmp:'.tmp'    
    };

    grunt.initConfig({
        project:config,
        watch:{
            html:{
                files:['<%=project.dist%>/*.html'],
                options:{
                    livereload: 35729
                }
            }
        },

        connect:{
            dist:{
                options:{
                    port:9001,
                    base:'dist',
                    open:true,
                    middleware:function (connect) {
                        return [
                           // 把脚本,注入到静态文件中
                           lrSnippet,
                           // 静态文件服务器的路径
                           serveStatic('dist'),
                           // 启用目录浏览(相当于IIS中的目录浏览)
                           serveIndex('dist')
                        ];

                    }
                }
            }
        }


    })

    //注册一个名为'serve', 输入grunt serve执行这个任务
    grunt.registerTask('serve','Compile then start a connect web server',function (target) {
        if(target === 'dist'){

        }else if (target === 'static'){

        }

        grunt.task.run([
                
                'connect',
                'watch'
            ])
    });

    grunt.event.on('watch', function(action, filepath, target) {
          grunt.log.writeln(target + ': ' + filepath + ' has ' + action);
          grunt.log.writeln('action='+action);
          grunt.log.writeln('filepath='+filepath);
          grunt.log.writeln('target='+target);
        });

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 启动一个web服务器连接 启动任务 使用grunt connect命令运行此任务。 请注意,只有grunt正在运行...
    angelwgh阅读 1,438评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 当文件被添加、更改或删除时,运行预定义的任务 安装插件 安装完插件后,可以在Gruntfile中用这行代码启用插件...
    angelwgh阅读 3,014评论 0 1
  • 一:LoadRunner常见问题整理1.LR 脚本为空的解决方法:1.去掉ie设置中的第三方支持取消掉2.在系统属...
    0100阅读 4,284评论 0 11
  • 在人生已步入中年,可人们口中成功人士的有房有车有存款,我却是没车没存款,就连住的房子还是父母以前盖的老房子。 在如...
    梅启林阅读 323评论 0 0