情况描述:

我们很容易遇到这样一种情况:
  我们并不是一开始就规划好了整个项目,比如可能接手别人的项目或者工程已经手动创建好了,现在要想利用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实现项目在浏览器中的自动刷新的更多相关文章

  1. 详解Net Core Web Api项目与在NginX下发布

    前言 本文将介绍Net Core的一些基础知识和如何NginX下发布Net Core的WebApi项目. 测试环境 操作系统:windows 10 开发工具:visual studio 2019 框架 ...

  2. 详解BOM用途分类及在汽车企业中的应用

    摘要:在整车企业中,信息系统的BOM是联系CAD.CAPP.PDM和ERP的纽带,按照用途划分产品要经过产品设计,工程设计.工艺制造设计.生产制造4个阶段,相应的在这4个过程中分别产生了名称十分相似但 ...

  3. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  4. SpringMVC详解及SSM框架整合项目

    SpringMVC ssm : mybatis + Spring + SpringMVC MVC三层架构 JavaSE:认真学习,老师带,入门快 JavaWeb:认真学习,老师带,入门快 SSM框架: ...

  5. SpringCloud 详解配置刷新的原理 使用jasypt自动加解密后 无法使用 springcloud 中的自动刷新/refresh功能

    之所以会查找这篇文章,是因为要解决这样一个问题: 当我使用了jasypt进行配置文件加解密后,如果再使用refresh 去刷新配置,则自动加解密会失效. 原因分析:刷新不是我之前想象的直接调用conf ...

  6. 详解C#泛型(二) 获取C#中方法的执行时间及其代码注入 详解C#泛型(一) 详解C#委托和事件(二) 详解C#特性和反射(四) 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码

    详解C#泛型(二)   一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { ...

  7. [图文详解] Sublime Text在Windows/Ubuntu/Mac OSX中配置使用CTags

    很开发者都在找Sublime Text中函数转跳的功能,这个是软件自身没有的功能,要靠CTags这个插件配合CTags的可执行程序的实现的.按照我的理解是CTags扫描索引你的项目文件,然后subli ...

  8. Keepalived详解(五):Keepalived集群中MASTER和BACKUP角色选举策略【转】

    一.Keepalived集群中MASTER和BACKUP角色选举策略 在keepalived集群中,其实并没有严格意义上的主.备节点,虽然可以在keepalived配置文件中设置state选项为MAS ...

  9. 详解隐马尔可夫模型(HMM)中的维特比算法

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 4. 隐马尔可夫模型与序列标注 第3章的n元语法模型从词语接续的流畅度出发,为全切 ...

随机推荐

  1. 版本控制,svn基础,实战案例,RPM打包

                                                   版本控制,svn基础,实战案例,RPM打包 案例1:Subversion基本操作 案例2:使用Subver ...

  2. Spring Framework之事务管理

    目录 问题 数据库事务 事务的定义 事务的目的 事务的特性 事务隔离级别 数据并发问题 事务隔离级别对数据并发问题的作用 快照读 Spring事务管理 事务管理接口 TransactionDefini ...

  3. python--Django从创建一个项目说起

    创建项目 首先进入一个空目录,打开操作命令行,输入: django-admin startproject 项目名称 建立数据库连接 进入项目目录打开settings.py文件,修改以下字段 DATAB ...

  4. String 对象-->lastIndexOf() 方法

    1.定义和用法 lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索. 语法: string.lastInde ...

  5. React Native简史

    诞生 React Native 诞生于 2013 年的 Facebook 内部黑客马拉松(hackathon): In the essence of Facebook’s hacker culture ...

  6. 数据结构和算法(Golang实现)(8.1)基础知识-前言

    基础知识 学习数据结构和算法.我们要知道一些基础的知识. 一.什么是算法 算法(英文algorithm)这个词在中文里面博大精深,表示算账的方法,也可以表示运筹帷幄的计谋等.在计算机科技里,它表示什么 ...

  7. 动态网页D-html

    BOM(Browser Object Model)浏览器对象模型 window对象(window – 代表浏览器中打开的一个窗口) 1.alert()方法 – 定义一个消息对话框 window.ale ...

  8. 动态规划_01背包_从Dijikstra和Floyd入手,彻底理解01背包

    dp一直是短板,现在从最基础的地方开始补 给定背包总容量 M ,n个商品选择,分别有价值vi,占量wi,从中取商品放入背包,令.容量和W=Σwi不超过M,令背包中的价值和V=Σvi最大 然后取法有很多 ...

  9. 理解SVG的缩放 偏移的计算公式

    SVG中DOM元素的偏移与缩放都是基于SVG元素的左上角,所以如何理解与计算SVG中元素的真实位置就比较难,下面的例子都以圆(circle)为例. 1.缩放假定缩放的比例为s,执行缩放后,圆的圆心坐标 ...

  10. Extjs简单的form+grid组合

    采用的是Extjs4.2版本 http://localhost:49999/GridPanel/Index 该链接是本地连接,只是方便自己访问,读者无法正常访问. <script src=&qu ...