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即可。

    原文作者:lius0608
    原文地址: https://segmentfault.com/a/1190000010248318
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞