html插件多个页面同步,html_reuse: 最近做的一些静态页面，经常需要反复修改，例如页面顶部和底部这些区域，相同的代码，却需要一个个页面打开去修改a标签的跳转，页面层级不一样还要注意是../...

html_reuse

项目介绍

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

软件架构

软件架构说明

RUN DEMO

# 1.进入项目根目录

# 2.安装依赖

npm install

# 运行服务编译文件

gulp

编译完成浏览器自动打开入口链接页面

gulpfile.js

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

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

@@include('./var.html', {

"name": "haoxin",

"age": 12345,

"socials": {

"fb": "facebook.com/include",

"tw": "twitter.com/include"

}

})

view.htm

view

var.html

@@name

@@age

@@socials.fb

@@socials.tw

编译出来的index.html

view

haoxin

12345

facebook.com/include

twitter.com/include

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

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

index.html

@@include('./navbar.html',{

"index": "active"

})

navbar.html

• 首页

• 关于

• 联系我们

编译出来的index.html

• 首页

• 关于

• 联系我们

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

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

@@include('list.html',{

"arr": "[1,2,3]"

})

list.html

@@for (var i = 0; i < arr.length; i++) {

`+arr[i]+`

}

编译后的index.html

• 1
• 2
• 3

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

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

index.html

@@loop('loop-article.html', [

{ "title": "My post title", "text": "

lorem ipsum...

" },

{ "title": "Another post", "text": "

lorem ipsum...

" },

{ "title": "One more post", "text": "

lorem ipsum...

" }

])

loop-article.html

@@title

@@text

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

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

home.html

Support Contact Info

Home