web前端减少你按刷新的频率
先下载：nodejs ,然后安装完以后，我们在命令行打印 node -v
完成后我们进行以下操作，安装browser-sync ,官网上有详细的教程，请访问：Browsersync
因为npm官网访问速度太慢造成的下载速度奇慢，我做了如下调整：
使用淘宝源，我使用的代码如下红色标识
C:\Users\Sunnciton>npm conf set registry https://registry.npm.taobao.org C:\Users\Sunnciton>npm i -g cnpm --registry=https://registry.npm.taobao.org C:\Users\Sunnciton\AppData\Roaming\npm\cnpm -> C:\Users\Sunnciton\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm + cnpm@5.1.1 added 709 packages in 94.077s C:\Users\Sunnciton>cnpm i -g browser-sync Downloading browser-sync to C:\Users\Sunnciton\AppData\Roaming\npm\node_modules\browser-sync_tmp Copying C:\Users\Sunnciton\AppData\Roaming\npm\node_modules\browser-sync_tmp\_browser-sync@2.23.2@browser-sync to C:\Users\Sunnciton\AppData\Roaming\npm\node_modules\browser-sync Installing browser-sync's dependencies to C:\Users\Sunnciton\AppData\Roaming\npm\node_modules\browser-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:\Users\Sunnciton\AppData\Roaming\npm\node_modules\browser-sync\node_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:\Users\Sunnciton\AppData\Roaming\npm\browser-sync@ -> C:\Users\Sunnciton\AppData\Roaming\npm\node_modules\browser-sync\dist\bin.js C:\Users\Sunnciton>dir 驱动器 C 中的卷是 系统 卷的序列号是 0BE6-0EDA C:\Users\Sunnciton 的目录 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:\Users\Sunnciton>cd F:\tomcat\webapps\ROOT\WEB-INF\phpbin C:\Users\Sunnciton>f: F:\tomcat\webapps\ROOT\WEB-INF\phpbin>dir 驱动器 F 中的卷是 文档 卷的序列号是 0BE6-0F39 F:\tomcat\webapps\ROOT\WEB-INF\phpbin 的目录 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:\tomcat\webapps\ROOT\WEB-INF\phpbin>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文件会即时发生改变！
