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

Java3y 发布于2019-08-29 12:57 / 1215人阅读

写在前面

安装环境前，默认安装了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即可。

混合云服务器托管自动刷新代码 html自动刷新 cdn自动刷新自动刷新设置教程

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

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

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

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

stackfing 2019-08-20 18:08 评论0 收藏0
gulp+browser-sync实现前端自动化刷新

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

cikenerd 2019-08-01 17:11 评论0 收藏0
前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法

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

villainhr 2019-08-21 10:47 评论0 收藏0
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境

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

xioqua 2019-08-19 17:54 评论0 收藏0
基于 Gulp 的简易前端自动化工程搭建

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

Blackjun 2019-08-22 10:36 评论0 收藏0