croe/slime

Flexible framework for Static webpage

SLIME

静的サイトを制作するための、柔軟なフレームワーク

依存パッケージ

Slimeを利用するには、予め以下のパッケージをインストールしておきます。

• Node.js required v4.0+
  • ダウンロードページからインストーラをダウンロードして実行
• Gulp
  • Node.jsをインストールした状態でnpm install -g gulpを実行

使い方

インストール

1. 依存パッケージのインストール
2. Slime最新版をダウンロード
3. フォルダをプロジェクト名でリネーム
4. ターミナル、またはコマンドプロンプトを起動し対象のディレクトリまで移動
5. 開発用npmパッケージのインストール

• $ npm install

コマンド

メイン

• gulp build
  • デプロイ用データをdist/に書き出します。
• gulp test
  • テストを実行します。
• gulp watch
  • http://localhost:8000/でdist/以下をローカルホスティングします。
• gulp generate
  • siteconfig.jsonで設定した内容からテンプレートをコピーし、HTMLを出力します。

サブ

いずれもメインコマンドに内包されていますが、個別で実行することも可能です。

• gulp build-precleaning
  • gulp build処理の最初にdist/を削除します。
• gulp build-precopying
  • src/のディレクトリ構造と内容をそのままdist/に書き出します。
• gulp build-postcleaning
  • dist/に出力されたものから、開発時のみ使用するものを削除します。
• gulp browserify
  • src/common/scripts/scripts.jsをdist/common/scripts/scripts.jsとして書き出します。
• gulp csscomb
  • dist/common/styles/styles.cssを上書きします。
• gulp ejs
  • src/以下のejsファイルをdist/以下に、階層を維持して書き出します。
• gulp imagemin
  • src/common/images/以下のビットマップ画像をdist/common/images/以下に、階層を維持して書き出します。
• gulp jsdoc
  • src/jsdoc/を作成します(上書き)。
• gulp jshint
  • src/common/scripts/以下のJSファイルを文法チェックします。
• gulp kss
  • src/kss/を作成します(上書き)。
• gulp mocha
  • test/mocha/以下のJSファイルをmochaテストファイルとみなして実行します。
• gulp pleeease
  • dist/common/styles/styles.cssを上書きします。
• gulp sass
  • src/common/styles/styles.scssをdist/common/css/styles.cssとして書き出します。
• gulp uglify
  • dist/common/scripts/scripts.jsを上書きします。
• gulp watchify
  • src/common/scripts/scripts.jsをdist/common/scripts/scripts.jsとして書き出します。
  • 監視モードで実行される以外はgulp browserifyと同じ振る舞いです。
• gulp webserver
  • localhost:8000/でローカルホスティングします。

HTML Template

• ejsを使います。
• 共通パーツをモジュール化して、静的にインクルードすることができます(結合したものが書き出されます)。
• TDK・OGP等サイト設定を外部ファイル化
  • Googleスプレッドシートを利用して、非エンジニアでも容易な編集が可能です。
  • siteconfig.jsonにメタ情報、OGP情報などをまとめておくことで、抜け漏れを防ぎます。
  • siteconfig.jsonを決まった形で記述することで、ページの量産が可能です。

スクリプト

• Browserifyを使います。
• shimを使ってグローバルにjQueryを宣言するため、BrowserifyとjQueryプラグインの併用が可能です。
• JSファイルにJsDocコメントを記述することで、ドキュメントを自動生成することができます。
  • JsDocコメントの書式は公式ドキュメントを参照ください。

ディレクトリ

• src/common/scripts/modules/
  • 再利用されない、プロジェクト固有なスクリプトを配置します。
• src/common/scripts/vendor/
  • サードパーティのスクリプトを配置します。

スタイルシート

src/common/styles/styles.scssで全てのスタイルシートファイルを集約し、1ファイルのスタイルシートとして書き出します。

スタイルシートはあらかじめ、Base、 Layout、 Module、 State、 Themeに分割されています。これはSMACSSにもとづいたものです。

ディレクトリ

• src/common/styles/modules/
  • 自前モジュールのスタイルシートを配置します。モジュールごとにファイルを分け、それらをsrc/common/css/_modules.scssで@importします。src/common/css/_modules.scssはsrc/common/css/styles.scssに@importされます。
• src/common/styles/vendor/
  • サードパーティのスタイルシートを配置します。

スタイルガイド (KSS)

スタイルシートにKSSコメントを記述すると、gulp kssでスタイルガイドを自動生成することができます。

KSSコメントの書式は公式ドキュメントを参照ください。

特殊なディレクトリについて

• src/
  • ソースファイルはこの中に配置します。
• dist/
  • デプロイファイルが書き出されます。gulp buildのたびにsrc/の内容にもとづき最新のデプロイファイルで中身が更新されます。ディレクトリ構造はsrcの内容が引き継がれます。

feature

• webフォントの置き場 、fontello等更新しやすく・管理しやすく

• Google apps scriptsでsiteconfig.jsonを生成する

• jsonの情報を読み取ってテンプレから指定パスでHTMLを生成する。

  • 個別値の入力ができないため、テンプレートからコピー＆リネーム時にHTMLファイルを出力する。

• JSDoc → ESDocへの変更

Author

• Akihiro Kato

  • Engineer

• Yoshiki Yamamoto

  • Engineer

LICENSE

• Released under the MIT Licenses.