gulp中抽取公共文件gulp-file-include方法

最新推荐文章于 2024-08-19 10:31:34 发布
最新推荐文章于 2024-08-19 10:31:34 发布
阅读量675 收藏 1
点赞数 1
分类专栏： Gulp 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45147894/article/details/115150591
版权
本文介绍了如何在gulp工作流中利用gulp-file-include来抽取公共文件，简化HTML头部代码的管理。首先从官网了解使用方法，然后通过powershell安装。接着在项目中引入gulp-file-include，创建公共文件夹存放header.html，删除article.html和default.html的头部代码，用@@include指令引用。最后通过gulp htmlmin进行文件压缩，确保头部代码能正确引入。
摘要由CSDN通过智能技术生成

进入官网进行查看使用方法： 

然后在powershell中下载gulp-file-include 

引入const fileinclude=require("gulp-file-include"); 

加入任务中的.pipe(fileinclude()) 

在src中创建 common文件夹

最低0.47元/天 解锁文章
㼛思雨
关注
专栏目录
Gulp的安装以及使用
m0_68449531的博客
03-20 790
gulp的使用
Gulp之gulp-runSequece顺序执行任务同步异步操作
weixin_45147894的博客
03-25 462
一开始用下面的方法，一直报错，无法得到想要的结果，经过大量的查询和文档查看，才清楚顺序执行的原理和同步异步的操作方法。 //构建任务 gulp.task('default',['htmlmin','cssmin','jsmin','copy']); 方法一： 我是先用的gulp4-run-sequence插件来实现顺序功能的，下面是npmjs.com里面的run-sequence安装和使用方法。 实现代码： //引用gulp模块 const gulp=require("gul...
gulp-extract:一个gulp插件，用于将文件内容提取到哈希中
05-21
口香糖提取物 一个gulp插件，用于将文件内容提取到哈希中 用法 安装gulp-extract作为开发依赖项： npm install gulp-extract --save-dev 提取文件内容 给定以下目录结构： ├── gulpfile.js # Your gulpfile └── src/ # Your application's source files └── layouts/ # A folder containing layouts └── root.hbs └── docs.hbs └── home.hbs gulpfile.js var extract = require ( 'gulp-extract' ) ;
node.js 使用教程-3.gulp-file-include 详细教程
qq_27371025的博客
09-24 746
gulp-file-include是gulp插件,它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来，实现 html 复用。
Gulp File Include 教程
gitblog_01081的博客
08-19 817
Gulp File Include 教程 gulp-file-includeMAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include项目地址:https://gitcode.com/gh_mirrors/gu/gulp-file-include 项目介绍 Gulp File Include 是一个基于 Gulp ...
HTML 代码复用——gulp-file-include
leo8729的专栏
12-19 7128
gulp-file-include
gulp批量打包文件并提取公共文件
weixin_33832340的博客
01-03 214
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。 browseriyf是模块化打包工具。 一般情况下，Browserify 会把所有的模块打包成单个文件。单个文件在大多数情况下是适用的，可以减少 HTTP 请求数量，提高性能。不过在其他一些情况下，打包的单个文件可能过大，使得页面的初始加载时间过长。这主要是因为单个文件中包含了全部的模块，其中的某些模块使用得很少，或是在页...
gulp-file-include 合并 html 文件
weixin_30838873的博客
09-24 237
gulp-file-include是gulp插件，它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来。 安装依赖包（包括了 gulp-file-include 和 del） npm install --save-dev gulp-file-include del 项目结构目录 修改 gulpfile.js，结合 browser-sync 一...
前端gulp工具的使用方法及常用插件
zj030920的博客
03-21 706
gulp插入使用方法
gulp使用gulp-file-include将header/footer引入页面
weixin_34358365的博客
03-18 257
前言：gulp将header/footer引入页面 这是使用fs、gulp-replace的一个方法，比较麻烦，每新增一个模块，就要写一个引入。也有其他更为简单的方法，gulp-file-include更为的简单简略，使用很久了，感觉不错，记录之。 1、引入插件 2、写task使用 3、页面引入，哪里需要哪里就include。 总结 1：不用写fs，哪里需要引入就直接include，简单、...
gulp-extract-json-like:Gulp插件，用于从文本中提取类似于字符串的JSON
05-13
Gulp提取JSON（如） 插件，用于从文本中提取类似于字符串的JSON。 安装 $ npm install --save gulp-extract-json-like 用法 var gulp = require ( 'gulp' ) ; var extractJsonLike = require ( 'gulp-extract-json-like' ) ; gulp . task ( 'default' , function ( ) { return gulp . src ( 'src/file.ext' ) . pipe ( extractJsonLike ( ) ) . pipe ( gulp . dest ( 'dist' ) ) ; } ) ; 但为什么？ 想象一下，您有一个格式的巨大文档，其中包含HTTP请求和JSON格式的响应，或者您希望它们是有效的JSON。
file-include-webpack-plugin：一个webpack插件，用于在html文件中使用@@ include语法包含文件，例如gulp-file-include
02-03
文件包含Webpack插件 一个webpack插件，用于在html文件中使用@@include语法@@include文件，例如gulp-file-include 。 安装 npm install --save-dev file-include-webpack-plugin 注意：此插件需要Webpack 4.0.0及更高版本。 用法 Webpack配置 更新webpack.config.js插件数组 // import the plugin const FileIncludeWebpackPlugin = require ( 'file-include-webpack-plugin' ) mo
推荐使用：gulp-file-include —— 流畅的前端构建文件包含利器
最新发布
gitblog_00364的博客
08-19 451
推荐使用：gulp-file-include —— 流畅的前端构建文件包含利器 gulp-file-includeMAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include项目地址:https://gitcode.com/gh_mirrors/gu/gulp-file-include 在前端开发领域，高效地组织和管...
探索 `gulp-file-include`：提升前端构建效率的利器
gitblog_00040的博客
04-14 337
探索 gulp-file-include：提升前端构建效率的利器 gulp-file-include MAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include 项目地址: http...
使用gulp-file-include对前端公共部分进行封装
牵着蜗牛去旅行的博客
12-15 531
当我们在画页面的时候，总有部分是和其他页面一模一样的，比如页头、页尾等，这样就导致一个地方的修改要在其他N个页面手动重复修改，这样很耗费耐心，又容易犯错，这时候gulp-file-include就显得很有作用 安装gulp-file-include npm install --save-dev gulp-file-include 2.创建gulpfile.js文件 const fileinclude = require('gulp-file-include') function fileInclude
gulp-file-include静态页面预构建
mrjimin的博客
09-15 634
  前端写html静态页面时，有很多页面的部分代码都是一样的，在没有用到框架的情况下，没有办法从分离提取出来，然后在需要的页面上引入使用，所以就用前端构建工具来处理，百度一下找到了gulp的一个插件gulp-file-include。 npm安装gulp，基本上安装的是最新版本或者新的稳定版本，新版gulp语法有变化，所以踩了一些坑，记录一下，总结经验 一、初始准备 我这里使用的是npm，npm是nodejs的功能，先检查一下是否安装nodejs node -v //查看nodejs对应版本号，可以
node.js中gulp的使用
就是有点怕怕的博客
02-09 341
1.gulp的定义和应用 定义：基于node平台开发的前端构建工具 应用：项目上线，HTML、CSS、JS文件压缩合并、公共文件抽离、语法装换（es6、less）、修改文件浏览器自动刷新 2.gulp的使用以及其方法 使用方法如下： 使用npm install gulp下载gulp库文件 在项目根目录下建立gulpfile.js文件 重构项目的文件夹结构src目录放置源代码文件dist目录...
gulp 同级目录，自动刷新和使用include
她的猿的博客
11-17 609
cnpm install -g gulp cnpm install gulp cnpm install gulp-connect cnpm install gulp-file-include gulpfile.js 配置如下 var gulp = require('gulp'); var connect = require('gulp-connect')
gulp-useref 的assets方法
05-30
`gulp-useref` 的 `assets` 方法是用于指定要处理的文件类型的方法。这个方法可以在 `gulp-useref` 的注释块里使用，用于选择需要合并的文件。 具体来说，`assets` 方法可以接收一个字符串或者一个正则表达式作为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值