从gulp 3.x迁移到gulp 4.x时，浏览器同步、脚本和样式重新加载不起作用 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Gulp 在金蝶云平台项目中的使用经验

刚开始想实现浏览器 F5 自动刷新使用到的是 grunt 和 livereload 插件，gulp 也有对应的方法，参考 gulp 教程之 gulp-livereload。...但是，它需要浏览器安装 livereload 插件才能使用，chrome 的插件需要访问外国网站下载，firefox 的插件不起作用，其它的浏览器也无法实现自动刷新。...简直就像是找到了宝藏一样，同样支持 grunt 和 gulp。...当然在同时开上多个浏览器测试页面时它将会很有帮助。...通过以下代码一个大体知道，上线打包主要是对图片样式脚本进行打包处理。所以接下来的工作就是职责分工，独立完成各自的构建工作。

1.7K0 0

09_Webpack打包工具

// 就可以执行script节点下dev选项的脚本来启动Webpack对项目进行打包处理。...“打包一切”这个优点对于 HTTP/1.1 尤其重要，因为所有资源打包在一起能明显减少浏览器访问页面时的资源请求数量，从而减少应用程序必须等待的时间。...使用Sass语言以及Sass的样式库（如 Compass）有助于更好地组织管理样式文件，并更高效地开发项目。在Webpack中，sass-loader加载器可以用来打包处理Sass文件。...CSS添加浏览器前缀使用npm run dev命令重新启动服务器 3.5 url-loader加载器 url-loader加载器用来打包处理CSS中与URL路径地址相关的图片和字体文件，并将图片和字体文件转换成为...当图片小于16940时，才会被转为base64图片查看图片效果使用npm run dev命令重新启动服务器 3.6 babel-loader加载器项目开发过程中，当编写JavaScript

791 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端页面可视化开发-livestyle,livereload,browser-sync

npm init 这样，就创建了一个package.json的文件这个文件用于标识node.js的包名，版本，依赖等信息编写gulp脚本： var gulp...脚本）代理服务器监听文件，不需要安装浏览器插件，只需安装node.js插件，局部刷新，可以实现手机浏览器和PC浏览器多个同步，包括视图同步和交互同步安装node.js和插件： npm...gulp --save-dev 写脚本： var gulp = require("gulp"); var livereload = require("gulp-livereload");...情况1：经测试发现，外部字体图标的css引入会引起服务器地址的错误，浏览器中修改样式，发现样式改变在bolb：http中。...的使用命令,不用V**代理,各浏览器同步内容和交互：在文件目录下 browser-sync start --server --files “**” gulp browser-sync

1.1K2 0

如何搭建组件库的最小原型

/components/lib/demo/index.vue"; Vue.component("name", Demo); 创建组件安装脚本：通常在使用开源 UI 库时并没有使用 component...来导入组件，而是使用的 use 进行安装，所以我们在组件的同目录创建一个组件的安装脚本： import Demo from "....；同步加载：同步加载能保证在使用是必定存在该模块，但是并不适用于浏览器端，当同步加载慢的时候可能造成浏览器假死的状态发生。...AMD：文件作用域：同 CommonJs，也是模块化的主要产物；异步加载：异步加载更好的适用于浏览器端，可以在异步加载后通过回调来执行后续的脚本。结论：AMD 的模块更适用于浏览器端应用。...来打包组件的样式代码： gulp 主要通过定义任务并使用流式的处理方式使用不同的管道依次进行，我们主要处理 scss 文件内容为 css 文件。

1.2K2 0

05-移动端开发教程-CSS3兼容处理

主流浏览器引擎前缀 -webkit- (谷歌, Safari, 新版Opera浏览器等) -moz- (火狐浏览器) -o- (旧版Opera浏览器等) -ms- (IE浏览器和 Edge浏览器)...只需要在.html文件中插入一个prefixfree.js文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。...如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚本加载失败，那么就会出现浏览器无法正常渲染CSS3的样式风格。...gulp和gulp的插件的项目本地插件包。...$ npm init -y # 初始化项目的npm配置文件 $ npm i -S gulp # 安装gulp到本地项目（仅开发时使用，S大写） $ npm i -S gulp-autoprefixer

2K12 0

05-移动端开发教程-CSS3兼容处理

主流浏览器引擎前缀 -webkit- (谷歌, Safari, 新版Opera浏览器等) -moz- (火狐浏览器) -o- (旧版Opera浏览器等) -ms- (IE浏览器和 Edge浏览器) 只有在新的...只需要在.html文件中插入一个prefixfree.js文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。...如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚本加载失败，那么就会出现浏览器无法正常渲染CSS3的样式风格。...gulp自动化配置和安装演示：第一步：安装node环境（已安装，略过) 第二步：安装gulp的全局的包 $ npm i -g gulp 第三步：在项目根目录下创建一个名为 gulpfile.js 的文件...优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。

1.6K6 0

ASP.NET Core 中的捆绑和缩小静态资产

基于环境的捆绑和缩小从 Gulp 使用 bundleconfig.json 手动转换捆绑和缩小工作流以使用 Gulp 运行 Gulp 任务其他资源参考资料最近在B站上看到杨旭老师的 ASP.NET...捆绑和缩小主要缩短第一个页面请求加载时间。请求网页后，浏览器会缓存静态资产（JavaScript、CSS 和图像）。...文件越少，从浏览器到服务器或从提供应用程序的服务的 HTTP 请求就越少。这会提高第一页加载性能。缩小缩小在不更改功能的情况下从代码中删除不必要的字符。.../缩小更改文件请求 7 18 157% 传输的 KB 156 264.68 70% 加载时间（毫秒） 885 2360 167% 对于 HTTP 请求标头，浏览器非常详细。...捆绑时，已发送的总字节数指标明显减少。加载时间显示了显著改进，但本示例在本地运行。将捆绑和缩小与通过网络传输的资产结合使用时，可实现更高的性能提升。

4K2 0

给初学者的Gulp教程（译）

watch-compile.gif 让我们来进行下一步，以及让Gulp重新加载浏览器，当我们保存一个.scss文件，通过Browser Sync。...Browser Sync的实时加载 Browser Sync使开发Web更加容易，通过创建一个Web服务器，帮助我们更容易的实时加载。它有其他的特性，比如跨多设备同步操作。...既然我们已经监视了.scss文件，并重新加载，为什么不更进一步，当HTML文件和JavaScript文件保存后，重新加载浏览器呢？...2.使用Sass编译器 3.当文件改变后，自动重新加载浏览器让我们进入下一届，讨论优化资源文件的部分。...组合Gulp任务让我们总结一下我们做的吧。到目前为止，我们创建了两个不同Gulp任务集。第一个任务集是一个开发进程，我们可以用它编译Sass到CSS，监视文件的修改，从而重新加载浏览器。

4.4K2 0

Web图标的工程化方案

优势：兼容性好还原度高劣势：同一图标的不同颜色需要设计多个图片新增图标需要重新合成sprite 由于是位图，兼容不同分辨率需要多套尺寸 iconfont 为了更易于控制图标颜色和大小，并兼容各种设备屏幕...优势：能够容易地改变图标的颜色，尺寸矢量图不失真兼容所有流行的浏览器，在h5和app上都能使用替换图标和新增图标也非常简单，也不需要考虑图标合并的问题劣势：只支持单色图标字体渲染，低倍屏下容易出现锯齿...可以使用工具脚本在本地项目中将SVG文件生成iconfont，更方便地管理项目图标。需要在项目中安装以下依赖库。...生成配套的css样式） gulpfile var gulp = require('gulp'); var iconfont = require('gulp-iconfont'); var iconfontCss...微信图片_20191215163745.png 小结各方案有利有弊，一套方案不一定能兼容全部场景，这一切都取决于项目实际情况和浏览器的支持情况，符合具体使用场景的解决方案才是好方案。

1.1K1 0

gulp+webpack工具整合简介

webpack特点 Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。...gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”...[ext]" } 对一些图片和字体资源进行加载，我们会把相关文件抽离出来进行名字加上hash值的前7位做了处理后的名字。...html加载器; { test: /\.html/, loader: "html-loader" } gulp脚本文件(重要) gulpfile.js var gulp = require

2.4K5 0

gulp+webpack工具整合简介

webpack特点 Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。...gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”...[ext]" } 对一些图片和字体资源进行加载，我们会把相关文件抽离出来进行名字加上hash值的前7位做了处理后的名字。...html加载器; { test: /\.html/, loader: "html-loader" } gulp脚本文件(重要) gulpfile.js var gulp = require

1.5K8 0

Gulp和Webpack对比

前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，...另外还需要安装另外两个模块**css-loader**和**style-loader**，前者是用来加载css相关文件的，后者是用来将css样式装填到html中的内联样式。...但是，这个功能是需要结合上一小节中的``gulp.watch()``实时监控文件变化，然后执行合并压缩和sass/less编译等操作后，浏览器再刷新时才能保证是我们修改后的内容。...所以，``livereload:true``属性只是监控到我们修改文件后刷新浏览器重新请求文件，如果我们不重新编译修改后的文件，浏览器获取到的还是原文件，并不会展示变化。...而且，如果需要的话，还能自动刷新浏览器，重新加载资源。

2.2K4 0

2019年末，来一发基于Hexo自建博客生态指南！

不做图片、Js脚本加载优化吗？不做SEO优化吗？不介绍如何自定义开发吗？嗯！...模板选择模板定制化修改网站SEO 代码优化优化网站加载速度 Github+Coding国内外双线部署自建CDN资源网站预加载JS脚本快捷图床工具 1....然后当你的网页翻到那张图片时（也就是图片在窗口中完全可见时），他会有一段js用data-origin的内容替换src，打到懒加载的目的。...网站预加载JS脚本推荐一个软件instant.page，作用是可以预加载用户想访问的页面，当用户真正点击链接后，就会直接从缓存中读取，以此提升网站的访问速度。...当用户徘徊 65 毫秒时，他们将点击该链接有两个机会，因此 instant.page 此时开始预加载，平均超过 300 毫秒，以便页面预加载。

8104 0

Gulp开发教程（翻译）

GULP-LOAD-PLUGINS 我发现gulp-load-plugin模块十分有用，它能够自动地从package.json中加载任意Gulp插件然后把它们附加到一个对象上。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BROWSERSYNC BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。...BrowserSync提供了一种在多个浏览器里测试网页的很好方式（查看大图）。 BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、滚动位置。...你可以在电脑和iPhone上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化，当你向下滚动页面时，所有设备上页面都会向下滚动（通常还很流畅！）。当你在表单中输入文本时，每个窗口都会有输入。...（查看大图） BrowserSync不需要使用浏览器插件，因为它本身就可以为你提供文件服务（如果文件是动态的，则为他们提供代理服务）和用来开启浏览器和服务器之间的socket的脚本服务。

8674 0

精通gulp常用插件

/dist')) JS/CSS自动注入 gulp-autoprefixer 描述：自动为css添加浏览器前缀。.../dist')) 查看更多配置：options 更多浏览器版本：browsers gulp-useref 描述：解析构建块在HTML文件来代替引用未经优化的脚本和样式表。.../js/*.js') .pipe(gulpif(condition, uglify(), concat('all.js'))) // condition为true时执行uglify(), else.../dist/')); 工具 gulp-load-plugins 描述：从包的依赖和附件里加载gulp插件到一个对象里给你选择。...// $ 是一个对象,加载了依赖里的插件 gulp.src('./**/*.js') .pipe($.concat('all.js')) // 使用插件就可以用$.

1.2K9 0

前端基本内容概述

CSS CSS(层叠样式表)是一种用来为结构化文档添加样式的计算机语言. JavaScript JS(JavaScript): 一种高级的，解释执行的编程语言....AJAX的优点: 在不重新加载整个页面的情况下, 可以与服务器交换数据，并更新部分网页内容. jQuery jQuery是一套跨浏览器的JavaScript库, 简化HTML与JavaScript之间的操作...RequireJS RequireJS: 一个JavaScript模块加载器. 好处: 使用RequireJS加载模块化脚本将提高代码的加载速度和质量....Gulp Gulp(Gulp.js): 基于文件流的构建系统, 部署代码的工具. 用法: 开发者可以使用它在项目开发过程中自动执行常见任务....Bootstrap Bootstrap: 用于快速开发Web应用程序和网站的前端框架.

6731 0

精通gulp常用插件

/dist')) JS/CSS自动注入 gulp-autoprefixer 描述：自动为css添加浏览器前缀。.../dist')) 查看更多配置：options 更多浏览器版本：browsers gulp-useref 描述：解析构建块在HTML文件来代替引用未经优化的脚本和样式表。.../js/*.js') .pipe(gulpif(condition, uglify(), concat('all.js'))) // condition为true时执行uglify(), else.../dist/')); 工具 gulp-load-plugins 描述：从包的依赖和附件里加载gulp插件到一个对象里给你选择。...// $ 是一个对象,加载了依赖里的插件 gulp.src('./**/*.js') .pipe($.concat('all.js')) // 使用插件就可以用$.

1.1K2 0

2019年末，来一发基于Hexo自建博客生态指南！

不做图片、Js脚本加载优化吗？不做SEO优化吗？不介绍如何自定义开发吗？嗯！...模板选择模板定制化修改网站SEO 代码优化优化网站加载速度 Github+Coding国内外双线部署自建CDN资源网站预加载JS脚本快捷图床工具 1....然后当你的网页翻到那张图片时（也就是图片在窗口中完全可见时），他会有一段js用data-origin的内容替换src，打到懒加载的目的。...网站预加载JS脚本推荐一个软件instant.page，作用是可以预加载用户想访问的页面，当用户真正点击链接后，就会直接从缓存中读取，以此提升网站的访问速度。...当用户徘徊 65 毫秒时，他们将点击该链接有两个机会，因此 instant.page 此时开始预加载，平均超过 300 毫秒，以便页面预加载。

8682 1

Python全栈之jQuery笔记

jQuery版本: 1.x版本: 能够兼容IE678浏览器 2.x版本: 不兼容IE678浏览器 1.x和2.x版本的jQuery都不再更新版本了,现在只更新3.x版本...,但不会等待图片的加载; 3.JS的入口函数会等待页面和图片都加载完成才执行....x版本支持低版本浏览器(IE7),3.x放弃支持低版本浏览器,适合应用在移动端. 2.x版本中文网址:http://2.swiper.com.cn/ 3.x版本中文网地址:http://...grunt、gulp grunt和gulp是使用node.js编写的,前端首选的自动化工具,gulp在书写配置上比grunt更简洁,运行的性能更高,gulp逐渐成为主流....(gulp-autoprefixer) 文件改名字 (gulp-rename) 3.3 前端性能优化从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度

5.5K4 0

gulp常用插件一

前言如果你已经在项目中引入了gulp，那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个，分别用于开发和生产。...install gulp-uglify --save-dev 使用场景：脚本上线之前完成压缩工作使用 var uglify = require('gulp-uglify'); gulp.task...因为页面文件中的都是相对目录，所以当css以及js使用为产出地址时，要求页面等必备的希望产品的也放到产出目录。...优化加载速度，提升页面性能，配置项为json类型。...，可以直接用$.name使用，后面多单词从第二个词开始首字母需要大写。

9162 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭