码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-01-21 00:53:58      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:task   pac   efault   根目录   地址   basedir   主页   错误   ice   

写在前面

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

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

标签:task   pac   efault   根目录   地址   basedir   主页   错误   ice   

原文地址:https://www.cnblogs.com/homehtml/p/12219686.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!