详解如何使用gulp实现项目在浏览器中的自动刷新
情况描述:
我们很容易遇到这样一种情况:
我们并不是一开始就规划好了整个项目,比如可能接手别人的项目或者工程已经手动创建好了,现在要想利用gulp来实现浏览器自动刷新,那么如何做呢?
其实非常简单,本篇文章将详细介绍实现方法和其中可能遇到的一些坑。
假设你已经使用npm全局安装了gulp,那么具体方法如下:
一、创建gulpfile.js文件
首先在项目根目录创建gulpfile.js文件,其作用在于,一旦我们在命令行输入gulp命令就可以读取gulpfile.js文件,运行其中的代码。
现在gulpfile.js是一个空文件,在其中输入以下代码:
var gulp = require(‘gulp’);
gulp.task(‘default’, function() {
// 将你的默认的任务代码放在这
});
现在,我们在命令行中用cd指令打开项目根目录,输入gulp指令或者gulp default指令,便会执行gulpfile.js中名为default的任务。当然,在default任务中你可以什么都不写,便什么也不会执行。
不过,这时会报错:local gulp not found in,这是因为我们虽然全局安装了gulp,却没有在项目中本地安装gulp模块。
那么全局安装和本地安装有何区别呢,请看第二节。
二、在项目中安装gulp模块
既然已经全局安装了gulp,为什么还要在项目中再次安装呢?
这里先讲讲全局安装gulp的作用。当我们全局安装gulp后,在命令行中输入:
gulp 任务名
指令便会读取gulpfile.js,执行对应任务。如果直接输入gulp指令,不加任务名,即:
gulp
便会执行default的默认任务。
下面看看本地安装gulp的作用。local gulp not found in这个错误表明,我们虽然能够在命令行中执行gulp指令读取gulpfile.js文件,然而在gulpfile.js文件中却无法使用gulp模块的API,那么就需要本地安装gulp。
操作方法:
1、在命令行中用cd指令打开项目根目录;
2、输入如下指令:
npm install --save-dev gulp
这样就在项目根目录下创建了node_modules目录,它保存的是用npm安装的模块。这里会看到一大堆文件夹和文件,其中就包括刚刚安装的gulp模块的文件夹。
这里–save是两个中划线,表明将把安装的gulp模块信息写入package.json文件dependencies 键下,如果项目没有package.json文件,就没有什么用。实测没有package.json文件也没有什么影响。实际项目中往往会有这个文件,便需要加上–save。加上-dev即–save-dev则不是写入dependencies 键下,而是会写入devDependencies 键下。
在项目根目录下还会多一个package-lock.json文件,不用管它。
三、在项目中安装gulp-connect和gulp-open模块
gulp-connect模块用于启动一个服务器,gulp-open模块用于打开浏览器查看指定url的页面。
操作方法:
1、在命令行中用cd指令打开项目根目录;
2、输入如下指令:
npm install --save gulp-connect
npm install --save gulp-open
可以发现,在node_modules目录下多了gulp-connect和gulp-open、open文件夹,这正是我们刚刚安装好的。
四、在gulpfile.js中编写自动打开浏览器和自动刷新浏览器的指令
首先我们需要引入模块:
var gulp=require(‘gulp’);//引入gulp模块
var connect=require(‘gulp-connect’);//引入gulp-connect模块
var open=require(‘open’);//引入open模块,注意不是gulp-open
我们可以定义一个根目录:
var rootPath=’./’; //根据实际情况定义
下面就可以使用gulp-connect模块启动服务器了:
gulp.task(‘serve’,function () {
connect.server({
root:rootPath, //使用前面定义的rootPath作为服务器运行的根目录
livereload:true, //是否自动监听,true表明自动监听
port:3056 //服务器的端口号,可以随便取一个
});
open(‘http://localhost:3056’); //自动使用浏览器打开http://localhost:3056的页面
});
这时,只需在命令行输入gulp serve指令便会自动启动服务器,并且在浏览器中打开http://localhost:3056,默认打开的是根目录下index.html文件。
但是还不能做到我们改变文件时,自动刷新浏览器查看效果,如果要监听根目录下html文件夹的.html文件和css文件夹中的.css文件,则可以编写如下任务添加到open语句后面:
gulp.watch(rootPath+‘html/.html’,[‘html’]); //一旦html目录下的.html文件改变便执行html任务
gulp.watch(rootPath+'css/.css’,[‘css’]); //一旦css目录下的.css文件改变便执行html任务
这里html和css任务应该怎么实现呢?我们需要使用connect.reload()。
如果我们在html任务和css任务中都这样写:
gulp.task(‘html’,function () {
connect.reload();
});
gulp.task(‘css’,function () {
connect.reload();
});
是不行的,因为只是自动刷新浏览器,却没有读取到目标文件的改变,结果便是没有变化。因此做如下改动:
gulp.task(‘html’,function () {
gulp.src(rootPath+‘html/.html’) //读取html文件的变化
.pipe(connect.reload());
});
gulp.task(‘css’,function () {
gulp.src(rootPath+'css/.css’) //读取css文件的变化
.pipe(connect.reload());
});
现在大功告成。只需在命令行中输入gulp serve便可以自动打开浏览器,查看页面效果。如果改变了html目录和css目录下的文件还会自动刷新页面效果。当然如果还要监听其他文件如js文件,只需要编写对应的语句即可。
现在还有一个小技巧可以稍微偷点懒:
在gulefile.js文件中增加一条语句:
gulp.task(‘default’,[‘serve’]);
这样我们在命令行中输入gulp便会自动执行default任务,而default任务执行之前先执行serve任务,假使default任务中什么也没有的话,便和执行gulp serve是一样的效果了。以后我们就可以在命令行中输入gulp,比起gulp serve来少输了几个单词。
详解如何使用gulp实现项目在浏览器中的自动刷新的更多相关文章
- 详解Net Core Web Api项目与在NginX下发布
前言 本文将介绍Net Core的一些基础知识和如何NginX下发布Net Core的WebApi项目. 测试环境 操作系统:windows 10 开发工具:visual studio 2019 框架 ...
- 详解BOM用途分类及在汽车企业中的应用
摘要:在整车企业中,信息系统的BOM是联系CAD.CAPP.PDM和ERP的纽带,按照用途划分产品要经过产品设计,工程设计.工艺制造设计.生产制造4个阶段,相应的在这4个过程中分别产生了名称十分相似但 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- SpringMVC详解及SSM框架整合项目
SpringMVC ssm : mybatis + Spring + SpringMVC MVC三层架构 JavaSE:认真学习,老师带,入门快 JavaWeb:认真学习,老师带,入门快 SSM框架: ...
- SpringCloud 详解配置刷新的原理 使用jasypt自动加解密后 无法使用 springcloud 中的自动刷新/refresh功能
之所以会查找这篇文章,是因为要解决这样一个问题: 当我使用了jasypt进行配置文件加解密后,如果再使用refresh 去刷新配置,则自动加解密会失效. 原因分析:刷新不是我之前想象的直接调用conf ...
- 详解C#泛型(二) 获取C#中方法的执行时间及其代码注入 详解C#泛型(一) 详解C#委托和事件(二) 详解C#特性和反射(四) 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码
详解C#泛型(二) 一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { ...
- [图文详解] Sublime Text在Windows/Ubuntu/Mac OSX中配置使用CTags
很开发者都在找Sublime Text中函数转跳的功能,这个是软件自身没有的功能,要靠CTags这个插件配合CTags的可执行程序的实现的.按照我的理解是CTags扫描索引你的项目文件,然后subli ...
- Keepalived详解(五):Keepalived集群中MASTER和BACKUP角色选举策略【转】
一.Keepalived集群中MASTER和BACKUP角色选举策略 在keepalived集群中,其实并没有严格意义上的主.备节点,虽然可以在keepalived配置文件中设置state选项为MAS ...
- 详解隐马尔可夫模型(HMM)中的维特比算法
笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 4. 隐马尔可夫模型与序列标注 第3章的n元语法模型从词语接续的流畅度出发,为全切 ...
随机推荐
- ceph概述
ceph概述 基础知识 什么是分布式文件系统 • ...
- Vulnhub DC-7靶机渗透
信息搜集 nmap -sP 192.168.146.0/24 #主机发现 nmap -A 192.168.146.144 #端口扫描 查看robots.txt,看看admin,403,其他没有什么可利 ...
- java文件中出现最多的前n个单词
将文件打开,之后每读入一次,最后按空格进行分割.存入到map里面之后进行相应的比较输出操作.并将相应的内容输出到文件里面. package com.keshangone; //将想要输出的数据写入新的 ...
- 100 Path Sum
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...
- Java第二天,类的概念,属性和方法的使用
上文中我们已近说到过了,Java是一种面向对象的编程语言,对象是用类来创建的,就比如世界上有无数个父亲,但是他们都有一个共同的属性--男人.也就是说某个父亲这个对象属于男人这个类.类是Java必不可少 ...
- Linux bash篇(三 数据流重定向)
1> 以覆盖的方式将正确的数据输出到文件或设备上 1>> 以追加的方式将正确的数据输出到文件或设备上 2> 以覆盖的方式将错误的数据输 ...
- 【C#】写一个支持多人聊天的TCP程序
碎碎念 先谈谈我们要实现的效果:客户端可以选择要聊天的对象,或者直接广播消息(类似QQ的私聊和群消息) 那么,该如何实现呢? 首先明确的是,要分客户端和服务器端两个部分(废话) 客户端:选择要发送的对 ...
- java day04记录
本文主要记录arr数组用法.count计算.arr倒排序技巧案例 package day4homework; import java.util.Scanner; /* 从键盘上输入10个整数,合法值位 ...
- python填写问卷星,疫情上报
#!!!注意:修改main里的url为真实的url,按需修改 50行 set_data中的submitdata # 61行 ip 修改为 真ip # submittype可能有错误,在151行 # 提 ...
- Progress笔记
1. iconv -f gbk -t unicode test.tmp > test.csv 如果出现文件数据补全,需要确认在这之前,output是否已经close,如果output to指定了 ...