美文网首页
如何自动实时加载页面?

如何自动实时加载页面?

作者: 请给我一根烟的时间 | 来源:发表于2018-04-26 16:44 被阅读0次

    书写HTML页面的过程中,能够一边输入一边在页面中自动加载输入的内容,是一种很好的体验。下面我们用一种很简单的方式来实现。

    准备node环境

    1. 可以使用mac环境brew包管理器
      在命令行中执行如下命令即可
        # 安装node环境 
        $ brew install node
        
       # 如果提示没有brew命令,需要先安装brew包管理器
       $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    1. 也可以直接下载node安装包进行安装

      前往 <a href="https://nodejs.org/zh-cn/" target="_blank">node中文站</a> 下载最新的LTS版本安装即可

    image
    1. 验证node环境是否已经成功安装
    $ node -v
    v8.9.2
    
    $ npm -v
    5.5.1
    

    安装npm模块lr-http-server

    npm是node package manager(node包管理器)的缩写,使用它可以方便的安装我们在开发过程中使用到的node模块。而lr-http-server这个node模块可以作为静态资源的服务器,并且实时资源的变更并重新加载展示页面。

    1. 安装lr-http-server模块
    $ sudo npm install -g lr-http-server
    /Users/mytream/.nvm/versions/node/v8.9.2/bin/lrhs -> /Users/mytream/.nvm/versions/node/v8.9.2/lib/node_modules/lr-http-server/bin/lr-http-server
    /Users/mytream/.nvm/versions/node/v8.9.2/bin/lr-http-server -> /Users/mytream/.nvm/versions/node/v8.9.2/lib/node_modules/lr-http-server/bin/lr-http-server
    + lr-http-server@0.1.5
    updated 1 package in 2.796s
    
    1. 进入项目工程,并启动静态资源服务器
    $ cd WebstormProjects/01-tezign-class
    
    $ lr-http-server
    HTTP server listening on port 8080
    Serving /Users/mytream/WebstormProjects/01-tezign-class
    Livereload listening on port 35729
    Watching files:
      /Users/mytream/WebstormProjects/01-tezign-class/**/*.html
      /Users/mytream/WebstormProjects/01-tezign-class/**/*.js
      /Users/mytream/WebstormProjects/01-tezign-class/**/*.css
      /Users/mytream/WebstormProjects/01-tezign-class/**/*.xml
    

    启动成功后,浏览器会自动打开链接 http://127.0.0.1:8080/,当然也可以用其他浏览器打开该地址。

    接下来,我们就可以用喜爱的编辑器编辑工程下的资源文件,这些改动都会实时的体现在浏览器上了!

    相关文章

      网友评论

          本文标题:如何自动实时加载页面?

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