文章 标签 分类

Gulp+BroserSync实现浏览器自动刷新

 收录于  类别 前端工具
     约 1921 字  预计阅读 4 分钟 

在写前端代码的时候，我们为了看效果，需要一直按F5进行刷新，这样做很繁琐而且非常浪费时间，在网上搜过后发现很多关于自动刷新的办法，这里我介绍的是基于gulp和broserSync实现浏览器的自动刷新，即只要编辑器保存，浏览器就会自动刷新。

那么gulp，broserSync是什么呢？

Gulp是一个前端自动化工具，基于nodejs，和grunt差不多，但是比grunt语法更加简单，语法更加自然。在gulp的插件中，我们可以找到自动刷新，压缩图片/代码/等等各类工具，方便我们的使用，并且gulp的任务是流（pipe），即一个任务完成后，紧接的另一个任务开始进行。gulp的使用如下：

  1. 全局安装gulp：
1

$ npm install --global gulp
  1. 作为项目的开发依赖（devDependencies）安装：
1

$ npm install --save-dev gulp
  1. 生成package.json
1

$ npm init

注意： 这里官网只是写让这么安装，但是需要注意，两个安装不是第一步第二步，而是第一种方式或者第二种方式，两种方式任选其一。第一种安装方式是全局安装，即安装后，整个电脑无论哪个项目都可以使用。对应的，第二个表示安装到对应项目中，即如果在window的cmd命令行进入对应项目A的目录，则运行npm install –save-dev gulp后，安装的gulp只能在该文件夹下使用，其他文件夹下的其他文件都无法使用。 其实不只是gulp，gulp的插件也是这样，要么全局安装，要么安装在项目中。一般情况下，gulp会全局安装，但是由于每个项目用到的gulp插件不同，所以可能需要局部安装gulp插件。 安装完成gulp之后，会在安装gulp的文件夹下生成node_modules文件夹。此时，在与该文件夹同层创建gulpfile.js这就是用于配置gulp插件的文件。

随着我们gulp插件的改变，package.json会自动变化，同时我们的配置文件gulpfile.js也会对应变化（自己手动配置）。他们可以把我们安装的gulp给备份，如果我们在电脑A中安装完我们的工具，然后换了一台电脑B，我们只需要把电脑A中package.json与gulpfile.js复制到B电脑，然后在安装完gulp后，运行

1

$ npm install

gulp就会自动把我们在package.json中的所有gulp插件全部安装回来，非常方便。

broserSync（以下简称bs）是一款非常优秀的自动刷新工具，本身可以独立使用，也可以配合gulp或者grunt一起使用，非常不错的一款插件。 当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。假设你正在开发单页应用的第4页，刷新页面就会导致你回到开始页。BrowserSync会直接将需要修改的地方添加进CSS，就不用再点击回退。同时，BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、滚动位置。你可以在电脑和iPhone上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化，当你向下滚动页面时，所有设备上页面都会向下滚动（通常还很流畅！）。当你在表单中输入文本时，每个窗口都会有输入。当你不想要这种行为时，也可以把这个功能关闭。 实际上bs对于gulp并不算是一种插件，因为bs并不像一个插件一样操作文件。然而，npm上的bs模块能在gulp上被直接调用。

进入需要使用bs的目录，运行：

1

$ npm install --save-dev broser-sync

bs本身可以打开本地静态服务器，也可以代理像wamp这样的服务器。

打开我们新建的gulpfile.js，配置如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/*browserSync*/
const gulp        = require('gulp');
const browserSync = require('browser-sync').create();
gulp.task("watch",function(){
    browserSync.init({
        /*这里的files写的是需要监控的文件的位置*/
         files:[             
             "./Home/View/PC/**/*.html",
             "./public/group/css/*.css",
             "./public/group/js/*.js"
         ],
         logLevel: "debug",
         logPrefix:"insgeek",
         /*这里的proxy写的是需要代理的服务器，我自己的wamp启动的是localhost:80*/
         proxy:"localhost:80",
         ghostMode: {
	        clicks: true,
	        forms: true,
	        scroll: true
	     },
         /*这里写的是代理后，bs在哪个端口打开*/
         port: 81,
         /*这里设置的是bs运行时打开的浏览器名称*/
	     browser: "chrome"
    });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
/*实时监控*/
gulp.task("watch", function() {
    browserSync.init({
        files: [
            "./work/*/*.html",
            "./work/*/*.css",
            "./work/*/*.js"
        ],
        logLevel: "debug",
        logPrefix: "insgeek",
        server: {
            /*这里写的是html文件相对于根目录所在的文件夹*/
            baseDir: "./work/statement"
            /*这里如果不写，默认启动的是index.html，如果是其他名字，需要这里写*/
            // index: "insurance_template_statement.html"
        },
        ghostMode: {
            clicks: true,
            forms: true,
            scroll: true
        },
        browser: "chrome"
    });
});

完成上述配置后，可以在cmd命令行切换到工作目录，运行gulp watch启动broserSync。

更新于 2016-05-16
 gulp
返回 | 主页