gulp-nice-page-builder

Gulp plugin of Static Site Generator.

Version 0.4.0 から、<script> タグの属性を変更しています！

Overview 概要

Generate HTML from template
Separate common data shared by multiple pages into external files
Site developers can freely add and call functions that return HTML strings
Rewrite pages or add new pages based on aggregation of pages
Rewrite pages or add new pages based on JSON files

テンプレートから HTML を生成します
複数のページで共有される共通データを外部ファイルに分ける
サイト開発者が HTML 文字列を返す関数を自由に追加して呼ぶことができます
ページの集計を元にしてページを書き換えたり新しいページを追加する
JSON ファイルを元にしてページを書き換えたり新しいページを追加する

gulpfile.js

gulp.task( 'html', function(){
    return gulp.src( './src/**/*.html' )
               .pipe(
                   nicePageBuilder(
                        {
                            srcRootPath : './src',
                            json : {
                                comments : 'json/comments.json',
                                tweets   : 'jsons/tweets.json'
                            }
                        }
                   )
                ) // .pipe( cleanHTML() )
                .pipe( gulp.dest( './public' ) );
);

名称

名称	説明
コンテンツ HTML	コンテンツと拡張タグだけが書かれた HTML
テンプレート HTML	コンテンツ HTML、ミックスインから参照される。必ずインラインスクリプト `{$$ this.CONTENTS $$}}` を持つこと
ミックスイン	json 形式、または js のオブジェクト
拡張タグページのプロパティ	`<script type="application/json" for="page-option">`
拡張タグ `before-build` スクリプト	`<script for="before-build">`
拡張表記インラインスクリプト	`{$$ $$}`
拡張表記ソースのルート相対パスを相対パスへ	`($$ $$)`

MIXIN と TEMPLETE はソ―スのルート下に置く。コンテンツ HTML 等からルート相対パスで参照するため。

json にはその制限がありません。

実行フロー

コンテンツだけの HTML、このページのプロパティで関連付けられたテンプレートファイルとミックスインファイルの読み込み
"json" に記述された json ファイルの読み込み
HTML に拡張タグ内に記述された before-build スクリプトの実行
書き出し

拡張タグ

Nice Page Builderのマニュアル > 5. HTML の拡張タグ

<script type="application/json" for="page-option">
{
　TEMPLETE : '/Templetes/templete.html',
　MIXINS   : ['/Mixin/top.json'],
　title    : '俺のサイトにようこそ！'
}
</script>

<script for="before-build">
// 全ページから label を回収
var labels = {}, path, label;
for( path in pages ){
    if( pages[path].label ) labels[ label ] = true;
};
// ラベルリストを書きだすメソッドの追加
Page.prototype.ALL_LABELS = labels;
Page.prototype.createLabelList = function(){
    var html = [], label;
    for( label in this.ALL_LABELS ){
        html.push('<b>' + label + '</b>');
    };
    return html.join(',');
};
</script>

拡張表記

Nice Page Builderのマニュアル > 6. HTML の拡張表記

<main>{$$ this.CONTENT $$}</main>

<link href="($$ /campany/about.html $$)">
↓
<link href="about.html">

Page クラス

Nice Page Builderのマニュアル > 7. Page クラス

Tutorials

npm install

gulpfile.js を確認します。

1. テンプレート、拡張タグ、インラインスクリプトについて

tutorial/1/source フォルダの index.html と templete.html を確認したら、次の gulp タスクを実行します。

gulp tutorial_1

tutorial/1/output フォルダに生成された output/index.html を確認します。

source/index.html の拡張タグ(<script type="application/json" for="page-option">)内で定義されている TEMPLETE:'/templete.html' がテンプレートを呼び出していること。

source/templete.html のインラインスクリプト({$$ this.CONTENT $$})が source/index.html の本文(<p>Hello, World!)に置き換わったことを確認します。

2. 任意のプロパティを追加してみる

tutorial/2/source フォルダの index.html の拡張タグに title が追加されていることを確認します。

templete.html には <title>{$$ this.title $$}</title> と <h1>{$$ this.title $$}</h1> が追加されています。確認の後に次の gulp タスクを実行します。

gulp tutorial_2

title は Web サイト開発者が定義したプロパティになります。

index.html の title を削除した場合は、templete.html の拡張タグの title プロパティの値 'No Title!' が使用されます。

3. 複数ページの制作、`MIXINS` で各ページで共通する値を別ファイルに分離する

gulp tutorial_3

4. “ソースのルート相対リンク”から“相対リンク”へ変換

gulp tutorial_4

5. `before-build` コールバックと `Page` クラスの拡張

gulp tutorial_5

6. `page.getJSON()` を使う

gulp tutorial_6

For more information

History

0.1.x までは Visual Studio Code エクステンションでした。

Visual Studio Marketplace > Nice Page Builder

Enjoy!