安装gulp

cnpm install gulp -g

输入gulp -v看到版本号说明安装成功了

安装gulp-file-include：npm install gulp-file-include --save-dev

demo：

项目文件夹目录

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    @@include('../include/meta.html')

</head>

<body>

@@include('../include/header.html')

<div>首页</div>

@@include('../include/footer.html')

</body>

</html>

product.html

<!DOCTYPE html>

<html lang="en">

<head>

    @@include('../../include/meta.html')

</head>

<body>

@@include('../../include/header.html')

<div>公司产品页</div>

@@include('../../include/footer.html')

</body>

</html>

meta.html

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>测试文件引入</title>

<meta name="keywords" content="aa,bb,cc,dd,ee,ff">

<meta name="description" content="1234567890">

<link rel="icon" sizes="any" mask="" href="" />

<link rel="stylesheet" type="text/css" href="/dist/css/common.css" />

<meta name="format-detection " content="telephone=no">

header.html

<div>

    <button><a href="/index.html">首页</a></button>

    <button><a href="/trade-news.html">行业新闻</a></button>

    <button><a href="/product/product.html">公司产品</a></button>

    <button><a href="/contact.html">联系我们</a></button>

</div>

footer.html

<div>这是footer部分</div>

gulpfile.js

var gulp = require('gulp');

var fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function () {

    gulp.src('src/pages/**/*.html')

        .pipe(fileinclude({

            prefix: '@@',

            basepath: '@file'

        }))

        .pipe(gulp.dest('dist'));

});

然后进入文件夹在cmd中输入gulp  fileinclude

然后你会发现文件夹下有一个dist文件

放到服务器上即可访问了

gulp打包公共部分的更多相关文章

  1. 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨

    先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给 ...

  2. 使用gulp打包普通项目

    前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...

  3. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  4. gulp打包详解

    gulp的作用 删除文件中冗余的内容,压缩文件,减小文件体积 实际项目中运行的都是压缩完成以后的文件 减小加载响应时间 gulp打包压缩对象 html,css,js,sass,webserver 音频 ...

  5. 【原】webpack结合gulp打包

    在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...

  6. 使用GULP打包、压缩与打版本号

    这篇文章讲我整理的一种打包项目的方式,以下是我的依赖清单 "devDependencies": { "gulp": "^3.9.1", &q ...

  7. gulp 打包合并

    1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm i ...

  8. gulp实现公共html代码复用

    在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的.我们不可能在每个html页面都写一遍,这样也不便后期维护等操作,所以可以把顶 ...

  9. webpack打包和gulp打包工具详细教程

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

随机推荐

  1. Codeforces 191A - Dynasty Puzzles - [DP]

    题目链接:https://codeforces.com/problemset/problem/191/A 题意: 给出 $n$ 个小写字母组成的字符串,两个字符串如果前者的最后一个字母与后者的首字母相 ...

  2. 安装和配置hive

    1.上传hive.mysql.mysql driver到服务器/mnt目录下: [root@chavin mnt]# ll mysql-5.6.24-linux-glibc2.5-x86_64.tar ...

  3. 2015年蓝桥杯省赛A组c++第8题(迭代法)

    /* 乐羊羊饮料厂正在举办一次促销优惠活动.乐羊羊C型饮料,凭3个瓶盖可以再换一瓶C型饮料, 并且可以一直循环下去(但不允许暂借或赊账). 请你计算一下,如果小明不浪费瓶盖,尽量地参加活动,那么,对于 ...

  4. Java8 in action

    解决的问题: behavior parameterization,即可以把一段code,逻辑作为参数传入: 这样做的目的,当然为了代码抽象和重用,把变化的逻辑抽象出去: 在java中,如果要实现beh ...

  5. 【LBS】基于地理位置的搜索之微信 附近的人 简单实现

    缘由 本周技术群有一个同学说我们该怎么实现 由近到远的基于地理位置的搜索,我创业做电商的系统做过类似这样的服务,我把我们以前的操作给大家分享下 什么是LBS LBS 全称是 Location  Bas ...

  6. 《Mysql 日志结构》

    推荐一首歌 - <往后余生>王贰浪 发现自己每天就听这么几首歌 一:慢查询日志 - SQL 完成查询并完成对于锁资源的释放之后,msqld 会将符合条件的SQL写入慢日志.因此慢日志可能和 ...

  7. 《Redis 垃圾回收》

    推荐一首歌 - <纸短情长> 花粥 很好听 一:redis的垃圾回收 - 为了可以使用更多的内存,redis有一套自己的键值淘汰机制. - 修改 maxmemory参数,限制Redis使用 ...

  8. Kubernetes应用管理

    除了容器资源管理和调度,Kubernetes另外一个核心价值是提供了针对不同类型应用管理的API接口集合,这些API集合把针对不同类型应用的管理能力分别到Kubernetes平台中.以Web业务(Lo ...

  9. 洛谷P2747周游加拿大Canada Tour [USACO5.4] dp

    正解:dp 解题报告: 传送门! 其实这题是我做网络流的时候发现了这题,感觉有点像双倍经验,,,? 但是我还不想写网络流的题解,,,因为网络流24题都还麻油做完,,,想着全做完了再写个总的题解什么的( ...

  10. Laravel编辑产品-CRUD之edit和update

    上一篇讲了Laravel展示产品-CRUD之show,现在我们说一下Laravel编辑产品,涉及到编辑和更新, 1,定义controller,update和create有点相似,我们复制一份过来修改. ...