情况描述:

我们很容易遇到这样一种情况:
  我们并不是一开始就规划好了整个项目,比如可能接手别人的项目或者工程已经手动创建好了,现在要想利用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. ceph概述

                                                                            ceph概述   基础知识 什么是分布式文件系统 •   ...

  2. Vulnhub DC-7靶机渗透

    信息搜集 nmap -sP 192.168.146.0/24 #主机发现 nmap -A 192.168.146.144 #端口扫描 查看robots.txt,看看admin,403,其他没有什么可利 ...

  3. java文件中出现最多的前n个单词

    将文件打开,之后每读入一次,最后按空格进行分割.存入到map里面之后进行相应的比较输出操作.并将相应的内容输出到文件里面. package com.keshangone; //将想要输出的数据写入新的 ...

  4. 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 ...

  5. Java第二天,类的概念,属性和方法的使用

    上文中我们已近说到过了,Java是一种面向对象的编程语言,对象是用类来创建的,就比如世界上有无数个父亲,但是他们都有一个共同的属性--男人.也就是说某个父亲这个对象属于男人这个类.类是Java必不可少 ...

  6. Linux bash篇(三 数据流重定向)

    1>        以覆盖的方式将正确的数据输出到文件或设备上 1>>        以追加的方式将正确的数据输出到文件或设备上 2>        以覆盖的方式将错误的数据输 ...

  7. 【C#】写一个支持多人聊天的TCP程序

    碎碎念 先谈谈我们要实现的效果:客户端可以选择要聊天的对象,或者直接广播消息(类似QQ的私聊和群消息) 那么,该如何实现呢? 首先明确的是,要分客户端和服务器端两个部分(废话) 客户端:选择要发送的对 ...

  8. java day04记录

    本文主要记录arr数组用法.count计算.arr倒排序技巧案例 package day4homework; import java.util.Scanner; /* 从键盘上输入10个整数,合法值位 ...

  9. python填写问卷星,疫情上报

    #!!!注意:修改main里的url为真实的url,按需修改 50行 set_data中的submitdata # 61行 ip 修改为 真ip # submittype可能有错误,在151行 # 提 ...

  10. Progress笔记

    1. iconv -f gbk -t unicode test.tmp > test.csv 如果出现文件数据补全,需要确认在这之前,output是否已经close,如果output to指定了 ...