FAQ
gulp-posthtml

使用 posthtml 实现 html 和 css 模块化

@zhouwenbin 2015-11-22 12:40:58 发表于 zhouwenbin/blog

準備

我们的目录结构如下

|-component
    |-button
      button.html
      button.css
    |-box
      box.html
      box.css
index.html

component 下放了所有组件，把 .html 和 .css 放一起：

component/button

button.html 代码

<css src="button/button.css"></css>
<a href="http://best-url-ever.com" class="button">button</a>

button.css 代码

.button{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
}

component/box

box.html 代码

<css src="box/box.css"></css>
<div class="box">
    <h1>title</h1>
    <p>Some text</p>
</div>

box.css 代码

.box{
    background: #ccc;
    margin: 0 auto;
    width: 50%;
}
.box h1{
    text-transform: uppercase;
}

index.html 代码

<html>
<head>
    <title>index.html</title>
</head>
<body>
    <include src="component/button/button.html"></include>
    <include src="component/box/box.html"></include>
</body>
</html>

代码里面可以看到 include 和 css 指令，我们需要装一些插件来转换。

操作準備

首先安装 node、npm，然後安裝套件。 在命令行输入：

npm install gulp posthtml posthtml-include posthtml-modular-css

在根目录下新建一个 posthtml.js 文件，内容如下：

var posthtml = require('posthtml'),
    html = require('fs').readFileSync('index.html').toString();

posthtml()
    .use(require('posthtml-include')({ encoding: 'utf-8' }))
    .process(html)
    .then(function(result) {
        require('fs').writeFile('output.html', result.html, function (err) {
            if (err) {
                throw err
            }
        })
    })

由于 posthtml-include 插件还没有 gulp 版本，所以我们先用 node 命令来执行，在命令行输入：

node posthtml.js

接着会在根目录生成 output.html 文件 (因為 posthtml.js 裡有設定)，内容如下

<html>
  <head>
    <title>index.html</title>
  </head>
  <body>
    <-- 引入 css html -->
    <css src="button/button.css"></css>
    <a href="http://best-url-ever.com" class="button">button</a>
    <css src="box/box.css"></css>
    <div class="box">
      <h1>title</h1>
      <p>Some text</p>
    </div>
</body>
</html>

node 已经帮我们把多个 html 文件合并起来了。然后在根目录新建一个 gulpfile.js 文件，内容如下

var gulp = require('gulp');
var posthtml = require('gulp-posthtml');

gulp.task('posthtml', function () {
    var plugins = [
        require('posthtml-modular-css')({
            srcFolder: __dirname + '/component/',
            outputCSS: './dest/style.css'
        })
    ];
    var options = {};

    return gulp.src('output.html')
        .pipe(posthtml(plugins, options))
        .pipe(gulp.dest('./dest'));
});

在命令行输入

gulp posthtml

gulp 会在 dest 目录下生成两个文件

output.html代码

<html>
<head>
    <title>index.html</title>
</head>
<body>

<a href="http://best-url-ever.com" class="button">button</a>

<div class="box">
    <h1>title</h1>
    <p>Some text</p>
</div>
</body>
</html>

style.css 代码

.button{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
}.box{
    background: #ccc;
    margin: 0 auto;
    width: 50%;
}
.box h1{
    text-transform: uppercase;
}

gulp 帮我们把用<css> 引入的语句去掉，并打包成一个样式文件。有了这两个插件，我们开发的时候只要定义好组件的结构和样式，需要用到的时候 <include> 进来就好了，最终都会打成一个文件，确实方便了好多。

gulp-posthtml

使用 posthtml 实现 html 和 css 模块化

準備

操作準備

results for ""

No results matching ""