HTML代码的复用实践

最近做的一些页面,纯粹使用jq这种,没有一些组件复用的功能,又需要经常修改,例如页面顶部和底部这些区域,相同的代码,却需要一个个页面打开去修改a标签的跳转、文件的引用路径等等,页面层级不一样还要注意是../还是./。一旦改错了,就等于做了无用功,回头还要一个个去检查。这样耗费的时间和精力实在是太多了。因此就有了本文的思考,很幸运目前已有gulp-file-include这样的插件去实现html的复用,减少我们的修改维护成本。以下就是介绍本实践项目的目录结构与gulp-file-include的使用

目录结构

测试代码下载: https://github.com/Sweet-KK/HTMLReuse

image.png

RUN DEMO

1
2
3
4
5
6
7
8
# 1.进入项目根目录

# 2.安装依赖
npm install

# 运行服务编译文件
gulp
编译完成浏览器自动打开入口链接页面

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var fileinclude = require('gulp-file-include');
var imagemin = require('gulp-imagemin');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');

var browserArr = ['last 2 versions', 'ie 9'];

var app = { // 定义目录
srcPath: './src/',
// buildPath:'./build/',
distPath: './dist/'
}

// 处理公用html
gulp.task('fileinclude', function () {
return gulp.src([app.srcPath + 'html/**/*.html'])
.pipe(fileinclude({
prefix: '@@', // 自定义标识前缀
basepath: app.srcPath + 'html/components' // 复用组件目录
}))
.pipe(gulp.dest(app.distPath + 'html'));
});

// 处理完lib文件后返回流
gulp.task('lib', function () {
return gulp.src(app.srcPath + 'lib/**/*')
.pipe(gulp.dest(app.distPath + 'lib'));
});

// 处理完JS文件后返回流
gulp.task('js', function () {
return gulp.src(app.srcPath + 'js/**/*.js')
.pipe(gulp.dest(app.distPath + 'js'));
});
// 处理less文件后返回流
gulp.task('less', function () {
return gulp.src(app.srcPath + 'less/**/*.less')
.pipe(less())
.pipe(autoprefixer({
browsers: browserArr,
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
}))
.pipe(gulp.dest(app.distPath + 'css'))
.pipe(reload({stream: true}));
});
// 处理完CSS文件后返回流
gulp.task('css', function () {
return gulp.src(app.srcPath + 'css/**/*.css')
.pipe(autoprefixer({
browsers: browserArr,
cascade: true, //是否美化属性值 默认:true
}))
.pipe(gulp.dest(app.distPath + 'css'))
.pipe(reload({stream: true}));
});

/*处理图片*/
gulp.task('image', function () {
return gulp.src(app.srcPath + 'images/**/*')
//.pipe(imagemin())
.pipe(gulp.dest(app.distPath + 'images'))
});


// 创建一个任务确保JS任务完成之前能够继续响应
// 浏览器重载
gulp.task('lib-watch', ['lib'], reload);
gulp.task('js-watch', ['js'], reload);
gulp.task('img-watch', ['image'], reload);
gulp.task('html-watch', ['fileinclude'], reload);

//静态服务器+监听
gulp.task('server', ['js', 'css', 'image', 'lib', 'less'], function () {
gulp.start('fileinclude');
browserSync.init({
port: 80,
server: {
baseDir: './',
}
});

// 无刷新方式更新
gulp.watch(app.srcPath + 'less/**/*.less', ['less']);
gulp.watch(app.srcPath + 'css/**/*.css', ['css']);

// 添加 browserSync.reload 到任务队列里
// 所有的浏览器重载后任务完成。
// 刷新页面方式
gulp.watch(app.srcPath + 'lib/**/*', ['lib-watch']);
gulp.watch(app.srcPath + 'js/**/*.js', ['js-watch']);
gulp.watch(app.srcPath + 'images/**/*', ['img-watch']);
gulp.watch(app.srcPath + 'html/**/*.html', ['html-watch']);
// gulp.watch(app.distPath + 'html/**/*.html').on('change', reload)
})


/*默认任务*/
gulp.task('default', ['server']);

编写html页面示例

1.导入复用组件----变量的使用

@@include options - type: JSON

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
@@include('./view.html')
@@include('./var.html', {
"name": "haoxin",
"age": 12345,
"socials": {
"fb": "facebook.com/include",
"tw": "twitter.com/include"
}
})
</body>
</html>

view.htm

1
<h1>view</h1>

var.html

1
2
3
4
<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>

编译出来的index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1>view</h1>
<label>haoxin</label>
<label>12345</label>
<strong>facebook.com/include</strong>
<strong>twitter.com/include</strong>
</body>
</html>

也就是说我们可以复用类似但又不完全一样的html代码,通过变量去控制内容

2.导入复用组件----if的使用

index.html

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
@@include('./navbar.html',{
"index": "active"
})
</body>
</html>

navbar.html

1
2
3
4
5
6
7
8
9
10
11
<ul class="navbar">
<li @@if (context.index==='active' ) { class="active" }>
<a href="index.html">首页</a>
</li>
<li @@if (context.about==='active' ) { class="active" }>
<a href="about.html">关于</a>
</li>
<li @@if (context.contact==='active' ) { class="active" }>
<a href="contact.html">联系我们</a>
</li>
</ul>

编译出来的index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<ul class="navbar">
<li class="active" >
<a href="index.html">首页</a>
</li>
<li >
<a href="about.html">关于</a>
</li>
<li >
<a href="contact.html">联系我们</a>
</li>
</ul>
</body>
</html>

另一种:控制不同的html导入

1
2
3
4
5
6
7
8
9
10
11
12
13
index.html:
@@include('nav.html', { "nav": 1 })

nav.html
@@if (nav === 1) {
@@include('navbar1.html')
}
@@if (nav === 2) {
@@include('navbar2.html')
}
@@if (nav === 3) {
@@include('navbar3.html')
}

也就是说我们可以通过if去控制不同的选中状态,或者控制不同的html导入

3.导入复用组件----for的使用

index.html

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
@@include('list.html',{
"arr": "[1,2,3]"
})
</body>
</html>

list.html

1
2
3
4
5
<ul>
@@for (var i = 0; i < arr.length; i++) {
<li>`+arr[i]+`</li>
}
</ul>

编译后的index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

也就是说我们可以通过for去生成多条html代码

4.导入复用组件----loop的使用

index.html

1
2
3
4
5
6
7
<body>
@@loop('loop-article.html', [
{ "title": "My post title", "text": "<p>lorem ipsum...</p>" },
{ "title": "Another post", "text": "<p>lorem ipsum...</p>" },
{ "title": "One more post", "text": "<p>lorem ipsum...</p>" }
])
</body>

loop-article.html

1
2
3
4
<article>
<h1>@@title</h1>
@@text
</article>

也就是说我们可以通过loop循环去生成多条代码,相比for方法少写了for循环语句

5.导入复用组件----webRoot的使用

home.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<link type=stylesheet src=@@fileRoot/css/style.css>
</head>
<body>
<h1>Support Contact Info</h1>
<footer><a href=@@webRoot/home.html>Home</a></footer>
</body>
</body>
</html>
1
2
3
4
@@include('home.html', {
"fileRoot": "../..",
"webRoot": "."
})

编译后

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<link type=stylesheet src=../../css/style.css>
</head>
<body>
<h1>Support Contact Info</h1>
<footer><a href=./home.html>Home</a></footer>
</body>
</body>
</html>

也就是说我们可以控制复用组件显示不同的根目录,像src、href...

更多用法请参阅官网

https://github.com/coderhaoxin/gulp-file-include

总结

当你所使用的框架中没有组件复用的功能时,有了以上配置,就可以大大提高开发效率,降低维护成本。节省下来的时间就可以好好学习其他知识了

坚持原创技术分享,您的支持将鼓励我继续创作!
0%