美文网首页
grunt插件之connect-livereload

grunt插件之connect-livereload

作者: angelwgh | 来源:发表于2017-06-06 10:25 被阅读0次

连接中间件,将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);
        });

}

相关文章

  • grunt插件之connect-livereload

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

  • 0329-Grunt

    Grunt快速入门 grunt 和grunt插件是通过npm安装管理 安装CLI grunt-cli不等于grun...

  • grunt插件之watch

    当文件被添加、更改或删除时,运行预定义的任务 安装插件 安装完插件后,可以在Gruntfile中用这行代码启用插件...

  • grunt插件之connect

    启动一个web服务器连接 启动任务 使用grunt connect命令运行此任务。 请注意,只有grunt正在运行...

  • Grunt使用记录

    简介 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Grunt...

  • Grunt入门(一)

    Grunt入门(一) 什么是grunt Grunt就和photoshop里面的插件一样,它能够帮我们自动完成一些反...

  • Grunt总结

    grunt 通过配置Grunt的一系列grunt-contrib-插件,实现前端自动化功能。 自动化。对于需要反复...

  • grunt学习笔记(1)

    grunt 简介:Grunt是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。。 Grunt ...

  • 按任务拆分 Gruntfile 配置文件

    使用 Grunt 作为前端构建工具有一段时间了,很感谢 Grunt 开发团队和众多的插件贡献者,得益于 Grunt...

  • grunt常用插件

    清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...

网友评论

      本文标题:grunt插件之connect-livereload

      本文链接:https://www.haomeiwen.com/subject/zjcgfxtx.html