zoukankan      html  css  js  c++  java
  • web前端减少你按刷新的频率

    先下载:nodejs  ,然后安装完以后,我们在命令行打印 node -v

    完成后我们进行以下操作,安装browser-sync ,官网上有详细的教程,请访问:

    因为npm官网访问速度太慢造成的下载速度奇慢,我做了如下调整:

    使用淘宝源,我使用的代码如下红色标识

    C:UsersSunnciton>npm conf set registry https://registry.npm.taobao.org
    
    C:UsersSunnciton>npm i -g cnpm --registry=https://registry.npm.taobao.org
    C:UsersSunncitonAppDataRoaming
    pmcnpm -> C:UsersSunncitonAppDataRoaming
    pm
    ode_modulescnpmincnpm
    + cnpm@5.1.1
    added 709 packages in 94.077s
    
    C:UsersSunnciton>cnpm i -g browser-sync
    Downloading browser-sync to C:UsersSunncitonAppDataRoaming
    pm
    ode_modulesrowser-sync_tmp
    Copying C:UsersSunncitonAppDataRoaming
    pm
    ode_modulesrowser-sync_tmp\_browser-sync@2.23.2@browser-sync to C:UsersSunncitonAppDataRoaming
    pm
    ode_modulesrowser-sync
    Installing browser-sync's dependencies to C:UsersSunncitonAppDataRoaming
    pm
    ode_modulesrowser-sync/node_modules
    [1/27] connect-history-api-fallback@^1.5.0 installed at node_modules\_connect-history-api-fallback@1.5.0@connect-history-api-fallback
    [2/27] etag@^1.8.1 installed at node_modules\_etag@1.8.1@etag
    [3/27] emitter-steward@^1.0.0 installed at node_modules\_emitter-steward@1.0.0@emitter-steward
    [4/27] dev-ip@^1.0.1 installed at node_modules\_dev-ip@1.0.1@dev-ip
    [5/27] fresh@^0.5.2 installed at node_modules\_fresh@0.5.2@fresh
    [6/27] http-proxy@1.15.2 installed at node_modules\_http-proxy@1.15.2@http-proxy
    [7/27] micromatch@2.3.11 existed at node_modules\_micromatch@2.3.11@micromatch
    [8/27] immutable@3.8.1 installed at node_modules\_immutable@3.8.1@immutable
    [9/27] connect@3.5.0 installed at node_modules\_connect@3.5.0@connect
    [10/27] fs-extra@3.0.1 installed at node_modules\_fs-extra@3.0.1@fs-extra
    [11/27] eazy-logger@3.0.2 installed at node_modules\_eazy-logger@3.0.2@eazy-logger
    [12/27] qs@6.2.1 installed at node_modules\_qs@6.2.1@qs
    [13/27] opn@4.0.2 installed at node_modules\_opn@4.0.2@opn
    [14/27] resp-modifier@6.0.2 installed at node_modules\_resp-modifier@6.0.2@resp-modifier
    [15/27] portscanner@2.1.1 installed at node_modules\_portscanner@2.1.1@portscanner
    [16/27] server-destroy@1.0.1 installed at node_modules\_server-destroy@1.0.1@server-destroy
    [17/27] ua-parser-js@0.7.12 installed at node_modules\_ua-parser-js@0.7.12@ua-parser-js
    [18/27] bs-recipes@1.3.4 installed at node_modules\_bs-recipes@1.3.4@bs-recipes
    [19/27] serve-index@1.8.0 installed at node_modules\_serve-index@1.8.0@serve-index
    [20/27] easy-extender@2.3.2 installed at node_modules\_easy-extender@2.3.2@easy-extender
    [21/27] serve-static@1.12.2 installed at node_modules\_serve-static@1.12.2@serve-static
    [22/27] localtunnel@1.8.3 installed at node_modules\_localtunnel@1.8.3@localtunnel
    [23/27] yargs@6.4.0 installed at node_modules\_yargs@6.4.0@yargs
    [24/27] browser-sync-ui@v1.0.1 installed at node_modules\_browser-sync-ui@1.0.1@browser-sync-ui
    [25/27] rx@4.1.0 installed at node_modules\_rx@4.1.0@rx
    [26/27] socket.io@2.0.4 installed at node_modules\_socket.io@2.0.4@socket.io
    fsevents@1.1.3 download from binary mirror: {"module_name":"fse","module_path":"./lib/binding/{configuration}/{node_abi}-{platform}-{arch}/","remote_path":"./v{version}/","package_name":"{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz","host":"https://npm.taobao.org/mirrors/fsevents"}
    platform unsupported chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
    [fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
    [27/27] chokidar@1.7.0 installed at node_modules\_chokidar@1.7.0@chokidar
    execute post install 1 scripts...
    [1/1] scripts.install socket.io@2.0.4 › engine.io@3.1.4 › uws@~0.14.4 run "node-gyp rebuild > build_log.txt 2>&1 || exit 0"
    [1/1] scripts.install socket.io@2.0.4 › engine.io@3.1.4 › uws@~0.14.4 finished in 6s
    Recently updated (since 2017-12-28): 1 packages (detail see file C:UsersSunncitonAppDataRoaming
    pm
    ode_modulesrowser-sync
    ode_modules.recently_updates.txt)
      2017-12-29
        → socket.io@2.0.4 › engine.io@3.1.4 › engine.io-parser@~2.1.0(2.1.2) (06:06:26)
    All packages installed (266 packages installed from npm registry, used 21s, speed 514.7kB/s, json 245(426.09kB), tarball 10.12MB)
    [browser-sync@2.23.2] link C:UsersSunncitonAppDataRoaming
    pmrowser-sync@ -> C:UsersSunncitonAppDataRoaming
    pm
    ode_modulesrowser-syncdistin.js
    
    C:UsersSunnciton>dir
     驱动器 C 中的卷是 系统
     卷的序列号是 0BE6-0EDA
    
     C:UsersSunnciton 的目录
    
    2018/01/04  10:26    <DIR>          .
    2018/01/04  10:26    <DIR>          ..
    2017/11/18  09:39    <DIR>          .android
    2018/01/04  10:14             1,181 .bash_history
    2017/12/07  15:13    <DIR>          .codeintel
    2018/01/04  10:02    <DIR>          .config
    2017/12/07  10:03               105 .gitconfig
    2018/01/04  10:02                 0 .node_repl_history
    2018/01/04  10:26    <DIR>          .npminstall_tarball
    2018/01/04  10:23                42 .npmrc
    2017/11/15  16:18    <DIR>          .vscode
    2018/01/03  08:51    <DIR>          3D Objects
    2017/12/06  10:36                 0 addmouseRight.bat
    2017/11/15  10:48    <DIR>          AppData
    2018/01/03  08:51    <DIR>          Contacts
    2018/01/04  10:05    <DIR>          Desktop
    2018/01/03  08:52    <DIR>          Documents
    2018/01/03  09:10    <DIR>          Downloads
    2018/01/03  08:51    <DIR>          Favorites
    2017/11/15  10:49    <DIR>          Icons
    2018/01/03  08:52    <DIR>          Links
    2018/01/03  08:51    <DIR>          Music
    2017/11/17  09:49    <DIR>          OneDrive
    2018/01/03  08:51    <DIR>          Pictures
    2017/12/01  09:48                 0 Q.txt
    2018/01/03  08:52    <DIR>          Saved Games
    2018/01/03  08:51    <DIR>          Searches
    2018/01/03  08:51    <DIR>          Videos
                   6 个文件          1,328 字节
                  22 个目录 118,103,502,848 可用字节
    
    C:UsersSunnciton>cd F:	omcatwebappsROOTWEB-INFphpbin
    
    C:UsersSunnciton>f:
    
    F:	omcatwebappsROOTWEB-INFphpbin>dir
     驱动器 F 中的卷是 文档
     卷的序列号是 0BE6-0F39
    
     F:	omcatwebappsROOTWEB-INFphpbin 的目录
    
    2018/01/04  10:28    <DIR>          .
    2018/01/04  10:28    <DIR>          ..
    2018/01/03  14:33               746 concat.php
    2018/01/04  10:29    <DIR>          css
    2018/01/03  16:39             1,941 index.php
    2018/01/04  09:10             1,218 poll.html
    2018/01/04  10:27                 6 poll_result.txt
    2018/01/04  10:27             1,056 poll_vote.php
                   5 个文件          4,967 字节
                   3 个目录 256,829,313,024 可用字节
    
    F:	omcatwebappsROOTWEB-INFphpbin>browser-sync start --proxy "localhost" "css/*.css"
    [Browsersync] Proxying: http://localhost
    [Browsersync] Access URLs:
     --------------------------------------
           Local: http://localhost:3000
        External: http://192.168.1.100:3000
     --------------------------------------
              UI: http://localhost:3001
     UI External: http://192.168.1.100:3001
     --------------------------------------

    已经使用监听成功!

    注意一个小细节,监控本地与开启静态服务,如果本地已有PHP服务器,假如是以下条件:

    本地PHP服务器端口:8080

    访问目录是:phpbin

    文件是:poll.html

    文件目录结构如下:

    css 

     --poll.css

    那么你在监听本地网页的时候,输入的命令如下:

    1.监听单个/多个文件改变

    browser-sync start --proxy "localhost:8080/phpbin/poll.html" --files "css/*.css"

    2.监听所有文件改变

    browser-sync start --proxy "localhost:8080/phpbin/poll.html" --files "*/*"

    监听的是poll.html文件,以及css下面的所有css文件,一旦修改css文件,html文件会即时发生改变!

  • 相关阅读:
    登录模块(前端bookstrapValidator校验+加密+后台加密+后台验证)
    spring+springmvc+mybatis+redis 实现两重数据缓存
    spring+springmvc+mybatis+redis实现缓存
    获取网页上的所有QQ号码,并生成exel报表
    单点登录(因为原理一样,所以没有实现注销)
    solr 基本命令二(权重查找)
    solr 搭建 (基于solr-5.0.0)
    OC 添加导航栏item
    xcode 一些三方库版本警告 iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.2.99.
    Swift UITextView设置富文本点击, 取消一切点击事件(放大镜/复制粘贴/删除等等)
  • 原文地址:https://www.cnblogs.com/cisum/p/8191793.html
Copyright © 2011-2022 走看看