gulp+browser-sync实现前端自动化刷新

写在前面

1. 安装环境前，默认安装了node环境

2. 会使用基本的命令行操作

步骤

初始化环境

1. 新建一个文件夹

2. 在文件夹打开命令行

   npm init

   一直回车默认选项就可以啦，也可以自己设置

3. 最后一次回车结束后，会生成一个package.json文件

安装gulp

1. 若是第一次使用gulp，则需要先全局安装gulp

   npm install --global gulp

2. 若已经全局安装gulp,则直接在工程根目录下：

   npm install gulp --save-dev

3. 输入gulp -v,显示版本说明安装成功

安装browser-sync

npm install browser-sync --save-dev

配置gulpfile文件

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
    var files = [
    '**/*.html',   // 监听html
    '**/*.css', // 监听css
    '**/*.js' // 监听js
    ];
    browserSync.init(files,{
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default',['browser-sync']);

测试

在工程根目录下打开命令行运行：

gulp

若上述无错误，将会在浏览器打开3000端口，这时输入相应的文件名.html就可以访问页面并实时刷新。比如有一个文件名叫主页.html，在浏览器地址栏输入http://localhost:3000/主页.html即可。