gulp自动化构建修改html文件的script标签引用

最新推荐文章于 2022-07-31 21:42:06 发布
原创 最新推荐文章于 2022-07-31 21:42:06 发布 · 436 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #gulp #自动化

本文介绍如何利用gulp-cheerio处理DOM，实现在不改变文件内容的情况下，将压缩后的JavaScript（xxx.min.js）文件名替换，并同步更新HTML中对应的script标签。解决Unicode编码问题，提升前端构建效率。

需求：通过其他方式压缩的JavaScript脚本改名为（xxx.min.js），同时需要修改html文件的script标签引用：

查阅资料：发现gulp-cheerio是可以操作DOM树的

解决方案：在gulp管道里直接可以获取$（'jsBridge'）文档节点，注意要加上parserOptions:{decodeEntities:false}解决Unicode编码问题

你的谎言
关注
前端自动化构建基础，以及相关插件使用（gulp篇）
觉醒法师的专栏
01-30 630
互联网的不断发展推动了web前端技术快速的向前，各种前端库或框架百花齐放。自动化构建是将源代码利用工具自动转换成用户可以使用的目标文件的过程，将复杂且重复性任务交给程序脚本自动完成，从而减小我们开发的工作量，加快开发速度。这里咱们先了解下gulp的使用，给咱们开发前端页面带了哪些便捷之处。
gulp-html-prefix:简单的gulp插件为classNames添加前缀
05-16
gulp-html前缀 Gulp插件为HTML文件中的类添加前缀。 安装 npm install --save gulp-html-prefix 用法 var gulp = require ( 'gulp' ) , classPrefix = require ( 'gulp-html-prefix' ) ; gulp . task ( 'prefix' , function ( ) { return gulp . src ( 'my-file.html' ) . pipe ( classPrefix ( 'my-class-prefix-' ) ) . pipe ( gulp . dest ( 'dist' ) ) ; } ) ; gulp . task ( 'default' , [ 'prefix' ] ) ; 使用ignored选项：
gulp 修改 html 引入,gulp-html-import，在html中引入外部html文件
weixin_35972199的博客
06-17 259
写于 2016.06.14css项目地址：html曾经学习PHP的时候，深深以为include语法很是好用，后接触了ejs，发现里面也有相似的语法，可以方便地引入公共html文件；在学习了vue，react等框架之后，“组件化思想”更是在我脑海根深蒂固，再也没法忍受每一个页面重复大量代码的原始方法。可是，在最最普通的静态html开发过程当中，我实在懒得用框架，只想用最基本的方式写几个静态页面出来，...
gulp-htmlprocessor:在构建时处理 html 文件，根据发布环境修改它们
07-08
gulp-htmlprocessor 在构建时处理 html 文件，根据发布环境修改它们 这个项目是的实现，它是插件的独立库。 地位 目前，从 v0.3.3 开始，支持grunt-processhtml 的所有功能。 差异 Grunt 插件和这个 Gulp 插件的唯一区别是环境选项，由于 Gulp 中缺少目标管理，必须手动设置。 用法 确保拥有最新版本的 Gulp： npm install -g gulp 使用以下命令安装插件： npm install --save-dev gulp-htmlprocessor 中列出选项和 HTML 语法。 现在，您可以在gulpfile.js处理您的 HTML： var gulp = require ( 'gulp' ) , htmlprocessor = require ( 'gulp-htmlprocessor' ) ; v
gulp-html-script:将 html 中的脚本分配到单独的文件中
07-12
gulp-html-脚本 将 html 中的脚本分配到单独的文件中 用法 <!-- about.html --> < body > < div> text text </ div> < script > var one = 222 ; one ++ ; </ script > < div> text text </ div> </ body > // gulpfile.js var gulp = require ( 'gulp' ) ; var htmlScript = require ( 'gulp-html-script' ) ; gulp . task ( 'html' , function ( ) { return gulp . src ( 'path/to/project' ) . pipe ( htmlScript ( ) ) . pipe
gulp 修改html内容,gulp配置实现修改js、css、html自动刷新
weixin_39947306的博客
06-03 373
写在前面：本配置支持es6、less1.首先给出初始的目录结构给出执行gulp后的目录结构给出执行gulp --p后的目录结构2.package.json里是一个写入。文件描述了npm包的相关配置信息(作者、简介、包依赖等)和所需模块。{"name": "gruntTest","version": "1.0.0","description": "","main": "Gulpfile.js"}3....
gulp 修改html内容,如何使用gulp任务将html转换为javascript字符串？
weixin_35647899的博客
06-03 289
由于@dfsq建议您所需要的html2js插件：var gulp = require('gulp');var html2js = require('gulp-html2js');gulp.task("createTemplates", function(){//create js templates for templatecachereturn gulp.src([baseDirectory +...
探索try_karma：Karma、Jasmine与Gulp自动化构建
而是对现代前端开发中三大核心工具的拟人化表达：“业力”指代Karma测试运行器，“茉莉花”代表Jasmine测试框架，“吞咽”则是Gulp自动化构建工具的音译。该项目是一个典型的前端自动化开发与测试环境搭建示例，结合...
基于Gulp的模板自动化构建项目
gulp-template 是一个基于 Node.js 的前端自动化构建项目模板，旨在通过 Gulp 构建工具实现高效的开发流程自动化。该项目为开发者提供了一套完整的开发环境配置方案，涵盖了从项目初始化、本地服务器启动、代码构建...
掌握Gulp自动化构建：高效管理个人开发流程
资源摘要信息:"Gulp是基于Node.js的前端自动化构建工具，通过简单的配置文件就可以快速实现代码压缩、合并、编译等功能。本文主要介绍Gulp在个人开发过程中的应用，特别强调如何使用gulpfile.js文件来自动化开发流程...
gulp插件自动解析HTML构建块并上传资源至七牛CDN
cdn` 是一个专为前端自动化构建流程设计的 Gulp 插件，其核心功能在于解析 HTML 文件中定义的“构建块”（build blocks），自动将开发环境下的多个资源文件（如 JavaScript、CSS）进行串联合并，并将合并后的静态...
修改html的url,gulp - css url修改
weixin_35843096的博客
06-03 304
说明这篇blog以实际问题驱动来写；Q: 表示问题表述；Q: 在实际项目中，font-awesome.css在编译到dest目录生成krp_index.css，并加载到页面，css引用的图片路径出错，无法加载；页面分页的上下翻页的图标消失了，下图红框标注处：分页上下图标消失了Q:为什么会产生这个问题下面寻找导致这个问题的原因图标由css@font-face定义以上图标的定义在krp_index.c...
gulp 修改html内容,Gulp实现静态网页模块化的方法详解
weixin_31993501的博客
06-03 382
前言在做纯静态页面开发的过程中，难免会遇到一些的尴尬问题。比如：整套代码有50个页面，其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍(最难受的方法)。然后，这个问题就这样解决了。再然后，产品经理看了几遍后突然说顶部的某块需要改改设计。。。突然感觉好尴尬~~(心里是万马奔腾~)，然后呢？然后就期待下一次的万马奔腾！！！虽然类似问题的解决方案很多，但是纯前端，不用各种框架的情况...
gulp 修改html内容,javascript – 如何在使用gulp-rev后将修改后的文件包含到.html中？...
weixin_35202013的博客
06-03 167
所以我在gulp中创建了这个任务：'use strict';var gulp = require('gulp');var gulpGlobals = require('./_gulp-globals.js');var rev = require('gulp-rev');var revReplace = require('gulp-rev-replace');gulp.task('gulp-rev'...
gulp提取html中的script,javascript
weixin_29895109的博客
06-17 349
Si我已经继承了Angular 1.5应用，并想添加一个NPM模块，ui-router-breadcrumbs github页面在这里我的探究是这部分：Usageimport the modules required for ui-router-breadcrumbs. It is necessary to include ngSanitize andui.router for ui-router...
gulp来处理html、css、js资源啦
开心学前端 : )
07-31 482
html文件通过插件对代码压缩less文件使用插件gulp-less解析，css文件兼容性通过处理js文件使用gulp-babel进行代码转换，压缩代码配合魔法注释将资源添加到html页面中和watch为编译开启自动服务串行和并行组合任务以上就是gulp处理html、css、js资源的介绍，更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~httpshttpshttpshttpshttpshttps。...
使用 gulp-html-replace 前端自动化配置替换html模板中指定内容
小青蛙的博客
05-31 5454
导读 在某些开发项目中，我们需要用到动态输出index.html文件，而这个页面文件内的资源也是需要动态加载的，就比如说在线面这些开发条件： 一些静态资源需要加版本号 动态编译sass，把编译后的内容动态植入html的style标签中，或者自动引用编译好的css文件 在index.html文件中，动态插入多个js文件的script脚本内容 如果你想往页面中动态插入一些你需要的一些内容，那gulp...
gulp实现引用文件内容到该页面
lipingping951462的专栏
01-19 2289
gulp.task('indexrep', () =>  gulp.src([`layout/${tpl}/index.html`]) .pipe(contentIncluder({                 includerReg://gi             }))         .pipe(gulp.dest(`dist/${tpl}/`)) ); 运行indexr
gulp压缩后替换html,gulp-html-replace和gulp-minify-html插件如何同时使用？
weixin_34535286的博客
06-03 343
问题描述gulp-html-replace和gulp-minify-html无法先后执行。问题出现的环境背景及自己尝试过哪些方法我目前遇到的问题是：目前有一个src/index.html文件1.将公共js和css压缩后生成到dist目录2.将源码index.html目录中引用的js和css路径替换为压缩后的路径3.将index.html也进行压缩，并生成到dist目录。我使用了gulp工具，使用了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值