新年の贈り物:Harp+gulp+browser-syncで静的なウェブサイトを構築します.

2712 ワード
固定サイトをHarp+gulp+browser-syncで構築する
目的:
  • ページのプロトタイプをすばやく実現します.
  • は、サードパーティテンプレートをより速く導入する.(WIP)
  • バックエンドのRestful APIをテストします.(WIP)
    • Harp紹介
    公式サイトhttp://harpjs.com/
    Harpは、静的なウェブページの前処理を行う静的なウェブサイトサーバを内蔵する.Harpが提供する機能は、以下を含む.
  • cssプリプロセッサ
  • ページデータローディング
  • テンプレートファイルレンダリング(Jade EJS)
  • http server(Node.jsベース)
  • 静的ウェブページのコンパイル出力
  • 静的ウェブサイトの展開
  • CoffeeScript
    • をサポートします.
    Harp 5項の基本原則http://harpjs.com/docs/development/rules
    自動変換テンプレートjade EJSからhtmlオブジェクトの設定を優先すると約束されていますが、アンダーラインの「u」で始まるリソースは直接入力されません.データはファイル名で自動バインディングされます.
    HarpのEJSテンプレートとデータバインディング
    EJSにおける構文:layoutの参照

    partial
    は、グローバル


    _harp.jsonページ { "globals": { "siteTitle": "Logic Designer" } }(パス:
    _data.json)/product/_data.json(パス:{ "webex": { "title": "webex", "date": "2016-12-28" } })データオブジェクト がテンプレートファイル と じであれば、テンプレートファイルのコンテキストに に され、ファイルオブジェクトレベルを して することができる.

    /product/webex.ejs テンプレートです.(デフォルトのラyoutのファイル はディレクトリ の

    data ， layoutまたは_layout.ejs)＿layout.jade で されていないファイルには、フルパスで する があります.(publicは、データ のルートノードとして およびファイル を してデータファイルを する){ "ykindex":{ "layout":"_ykindex-layout", "title":"yunkechina " } } のhttpサーバ ウェブサイトを する

    compile： www ， html 。
    $ harp compileQ&A:
    はこれらの なウェブページの ツールを ました.Asmble、Metalsmith、Roots、Brunch( のツールと:https://www.staticgen.com/)
    なぜHarpを んだのですか? のフレームは かりませんから.
    なぜEJSテンプレートを しますか?Jadeは えていません
    なぜウォッチマンを わないですか?できません
    ページ ツール

  • Glp+Broswer-syncは を し、 を する.(これで がもっとできる)
  • は、 テンプレートライブラリを し、bootstrapに づく.
  • は、 プレースホルダとしてHolder.jsを する.
    • のフロント は を む.
    codepen Harpインターネット :How to use the Harp.js static site generator Node.js E-Commerce with Harp JS&Snipcart-Snipcarthttps://github.com/snipcart/snipcart-harp Harp,Gulp And BrowserSynchttps://github.com/superhighfives/harp-gulp-browsersync-boilerplate $ harp server --port 9000
    Spring注入のいくつかの方法と構成器パラメータの解析
    Cヒドロワンは磁気フォーム(吸着、剥離、移動)を実現します.