静态页面模块化探索

常关注的都知道，我有个站点叫”醉牛前端“，刚发出来的时候就有人说开发方式简陋，手工维护静态页面，不便于多人协作。

我就是受害者本人，所有东西都堆在一个页面当中，查看和维护都很费力，所以，可不可以分拆模块呢？

工作当中我们是这样做的：

<!-- #include = "./file.shtml" -->

但是，懂的人能看出来，这不是静态页，后缀是‘shtml’，平时我们开发也要在本地撘个apache才能正常访问，那可不可以不要服务器呢？

答案是可以，不得不说程序员的伟大（除了我~）

我们可以使用其他工具，比如：gulp插件。

一、gulp-content-includer

关于安装不再赘述，自行查阅很快搞定，只需要来了解，这个插件怎么使用

gulpfile

var gulp = require('gulp');
    var contentIncluder = require('gulp-content-includer');
    var rename = require('gulp-rename');

    gulp.task('default', function() {
        gulp.src("test_src.html")
            .pipe(contentIncluder({
                includerReg:/<!\-\-include\s+"([^"]+)"\-\->/g
            }))
            .pipe(rename('index_test.html'))
            .pipe(gulp.dest('./'));
    });

test_src

<article class="mainarea item">
    <!-- 手册 -->
    <!--include "./mod/handbook.html"-->
    <!-- 工具 -->
    <!--include "./mod/tools.html"-->
    <!-- 代码在线演示 -->
    <!--include "./mod/code_online.html"-->
</article>

index_test作为最终生成文件（代码过多就不贴出来了）。

• 一个目标文件
• 一个正则匹配设定include的格式
• 一个输出文件

如果你的页面要求不多，只需要这样，可以直接把这段代码拿过去用，无痛接入。

项目地址：gulp-content-includer

当然，既是插件，肯定不止这一种选择，再看另一个。

二、gulp-file-include

gulpfile

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

gulp.task('fileinclude', function() {
    gulp.src(['./src/*.html'])//主文件
        .pipe(fileinclude({
            prefix: '@@',//变量前缀 @@include
            basepath: './src/_include',//引用文件路径
            indent:true//保留文件的缩进
        }))
        .pipe(gulp.dest('./dist'));//输出文件路径
});

乍一看，差不多，但从上面的代码细节看，更易用，且供选择的功能也更多，这里没有完全列出，它还能处理导航条（选中态）、面包屑等网页常见元素的功能。

贴一段导航条示例代码瞅瞅：

index

@@include('./navbar.html',{
    "index": "active"
})

navbar

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

编译结果：

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

以上只作为简介，更多功能可参考官方文档深入研究。

项目地址：gulp-file-include

小结

对于静态页面的模块化，可能多数人是不需要的，因为要么团队本身搭建有服务器，要么是个人开发的一个需要后台支持的项目，也有服务器，但知道有这么个可用的东西是有益的，需要的时候能派上用场，如果你有类似的经历和更好的解决方案，欢迎交流。