Skip to content

静态页面HTML代码的复用实践 #7

New issue
New issue
Open
Open
静态页面HTML代码的复用实践#7
Labels
前端
@Sweet-KK

Description

@Sweet-KK
Sweet-KK
opened on Jun 6, 2021

date: 2018-05-19

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

目录结构

image.png

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

<!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

<h1>view</h1>

var.html

<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>

编译出来的index.html

<!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

<!DOCTYPE html>
<html>
  <body>
  @@include('./navbar.html',{
     "index": "active"
   })
  </body>
</html>

navbar.html

<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

<!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导入

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

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

list.html

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

编译后的index.html

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>

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

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

index.html

<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

<article>
  <h1>@@title</h1>
  @@text
</article>

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

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

home.html

<!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>

@@include('home.html', {
"fileRoot": "../..",
"webRoot": "."
})

编译后

<!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

总结

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    前端

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions