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文件会即时发生改变!

  • 相关阅读:
    Codeforces 877 C. Slava and tanks
    Codeforces 877 D. Olya and Energy Drinks
    2017 10.25 NOIP模拟赛
    2017 国庆湖南 Day1
    UVA 12113 Overlapping Squares
    学大伟业 国庆Day2
    51nod 1629 B君的圆锥
    51nod 1381 硬币游戏
    [JSOI2010]满汉全席
    学大伟业 2017 国庆 Day1
  • 原文地址:https://www.cnblogs.com/cisum/p/8191793.html
Copyright © 2011-2022 走看看