gulp打包公共部分

最新推荐文章于 2024-03-19 11:36:21 发布

weixin_30664615

最新推荐文章于 2024-03-19 11:36:21 发布

阅读量165

点赞数

原文链接：http://www.cnblogs.com/ldlx-mars/p/8509172.html

版权

安装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文件

放到服务器上即可访问了

转载于:https://www.cnblogs.com/ldlx-mars/p/8509172.html

weixin_30664615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gulp打包公共部分

安装gulpcnpm install gulp -g输入gulp -v看到版本号说明安装成功了安装gulp-file-include：npm installgulp-file-include --save-devdemo：项目文件夹目录index.html<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫