使用posthtml实现html和css模块化 #6

zhouwenbin · 2015-11-22T12:40:58Z

上两篇文章介绍了postcss，这篇文章介绍下posthtml，这东西还比较新，但是有些东西已经可以用起来了。
在这之前模块化我都是用slim+scss来做的，现在换posthtml，来看看差别在哪里。
我们的目录结构如下

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

component下放了所有组件，把html和css放一起，
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;
}

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文件，内容如下

<html>
<head>
    <title>index.html</title>
</head>
<body>
    <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>进来就好了，最终都会打成一个文件，确实方便了好多。

The text was updated successfully, but these errors were encountered:

kujian · 2015-11-24T07:47:07Z

看不懂这样子写有什么便利，你还不如直接使用SSI

zhouwenbin · 2015-11-24T11:27:54Z

@kujian 这个不用服务端支持，定义好组件结构和样式依赖，打包完的样式是最精简的。不用结构和样式都分别include

KoreSamuel · 2016-03-29T09:00:22Z

可以同时对多个html打包了。不指定html文件名，指定某个文件夹吗？

yutingzhao1991 mentioned this issue Nov 29, 2015

文章更新 [ 2015-11-22 - 2015-11-28 ] yutingzhao1991/github-blogs-weekly#12

Open

zhouwenbin mentioned this issue Dec 16, 2015

polymer初探 #13

Open

moocss mentioned this issue Feb 26, 2016

CSS最佳实战 thoughtbit/it-note#51

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

使用posthtml实现html和css模块化 #6

使用posthtml实现html和css模块化 #6

zhouwenbin commented Nov 22, 2015

kujian commented Nov 24, 2015

zhouwenbin commented Nov 24, 2015

KoreSamuel commented Mar 29, 2016

使用posthtml实现html和css模块化 #6

使用posthtml实现html和css模块化 #6

Comments

zhouwenbin commented Nov 22, 2015

kujian commented Nov 24, 2015

zhouwenbin commented Nov 24, 2015

KoreSamuel commented Mar 29, 2016