资讯专栏INFORMATION COLUMN

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

Java3y / 1281人阅读

写在前面

安装环境前,默认安装了node环境

会使用基本的命令行操作

步骤 初始化环境

新建一个文件夹

在文件夹打开命令行

npm init

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

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

安装gulp

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

npm install --global gulp

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

npm install gulp --save-dev 

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112259.html

相关文章

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

    写在前面 安装环境前,默认安装了node环境 会使用基本的命令行操作 步骤 初始化环境 新建一个文件夹 在文件夹打开命令行 npm init 一直回车默认选项就可以啦,也可以自己设置 最后一次回车结束后,会生成一个package.json文件 安装gulp 若是第一次使用gulp,则需要先全局安装gulp npm install --global gulp 若已经全局安装gu...

    stackfing 评论0 收藏0
  • gulp+browser-sync实现前端动化刷新

    写在前面 安装环境前,默认安装了node环境 会使用基本的命令行操作 步骤 初始化环境 新建一个文件夹 在文件夹打开命令行 npm init 一直回车默认选项就可以啦,也可以自己设置 最后一次回车结束后,会生成一个package.json文件 安装gulp 若是第一次使用gulp,则需要先全局安装gulp npm install --global gulp 若已经全局安装gu...

    cikenerd 评论0 收藏0
  • 前端开发:实时刷新(及时预览)工具小汇总,兼有gulp+browser-sync设置方法

    摘要:打开您的命令行工具,进入到目录下,运行以下其中一条命令。将创建一个本地服务器并自动打开你的浏览器后访问地址,这一切都会在命令行工具里显示。 自己写标签: 实时刷新、 免F5、 gulp + browser-sync 开门见山,首先讲明一下本文的定位吧:写这篇文章是因为自己在平时的学习中,一次次试验了很多的前端实时刷新工具,有顺手的,有蹩脚的,有简单的,有麻烦的,安装完又折腾,折腾完又卸...

    villainhr 评论0 收藏0
  • 基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境

    摘要:首先在下面,定义好模版文件,然后开始新加页面关系依赖这个环境,主要基于以及一系列的插件搭建,这个是开发环境的依赖关系其中,主要用来渲染模版引擎以及提供路由功能,同时起一个本地的服务器。同时附上全文,以供参考 原文发布于我的博客 www.kisnows.com 为什么要搭这么一套开发环境 公司 Pc 端以前遗留的项目,都是基于 jekyll+ruby-sass 这一套比较老的技术搭建的。...

    xioqua 评论0 收藏0
  • 基于 Gulp 的简易前端动化工程搭建

    摘要:生成的文件如下由于给文件添加了哈希值,所以每次编译出来的和都是不一样的,这会导致有很多冗余文件,所以我们可以每次在生成文件之前,先将原来的文件全部清空。中也有做这个工作的插件,因此我们可以在编译压缩添加哈希值之前先将原文将清空。 原文链接:http://mrzhang123.github.io/2016/09/07/gulpUse/项目链接:https://github.com/MrZ...

    Blackjun 评论0 收藏0

发表评论

0条评论

Java3y

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<