maki-o memo

制作に関する私的なメモです

選択されているタグ : npm

タグを絞り込む : bower grunt Punch

npmでPunchとGruntとBowerと

で、静的サイト制作環境つくってみました。

https://github.com/maki-t2nd/punch

ながれはこう

$ git clone git@github.com:maki-t2nd/punch.git
$ npm install
$ grunt bower:install

という感じで作業環境を生成。
制作中は、

$ punch s

と、

$ grunt watch

を、両方走らせての作業。
このへん間違ってる気がします。

そして最後に、

$ punch g

で、静的ページをアウトプット。

以下メモです。

Punch

Punch - A Fun and Easy Way to Build Modern Websites

config.json

Punchの設定ファイル。
これを編集して振る舞いを変える。

server

  • port : ポート指定

bundles

  • stylesheet_bundle, javascript_bundleの設定をここでする
  • all.cssとかは、punch s で制作中は出力されない。punch g すると出力される。

asset_bundling

  • fingerprint : false で、生成されるcssやjsにユニークな数値を付与しない

plugins

  • 各種プラグインをnpmで入れれる。そしてここに記述

generator

  • skip_paths : $punch g 時に出力しないファイル・フォルダを指定できる

mustache

Punchのデフォルトのhtmlテンプレートはmustache。

{{ mustache }}
  • contensディレクトリにはサイトの構造に応じたjsonファイル
  • Partialするファイルはカレントディレクトリのものが優先して読まれる
  • mustacheファイルが存在しても、対になるjsonファイルが存在しないとページ生成されない
  • mustacheファイルから生成しないとマルチバイト文字が文字化ける(cssとかtxtどうしよう

Grunt

Grunt: The JavaScript Task Runner

Gruntでは、以下のタスクを。

  • Bowerのインストールを制御
  • compass
  • ライブリロード

Gruntの設定は、Gruntfile.jsに書きます。

Bowerのインストール制御

Bowerのインストール制御には以下のエントリを参考に、grunt-bower-taskを使用してます。

Bower入門(応用編)
grunt-bower-task

compass

compassは最初単体でcompass w してたのですが、Gruntでやることに。
watchもしたいので、watchのも入れる。

grunt-contrib-compass
grunt-contrib-watch

ライブリロード

ライブリロードはgrunt-contrib-watchでできてるみたい。あまりよくわかってません。
htmlファイルに以下の記述が必要でした。

<script src="http://localhost:35729/livereload.js"></script>

Bower

BOWER: A package manager for the web

Bowerは、上記のBower入門(応用編)を参考にbower.jsonとGruntfile.jsを設定。

bower.json

  • exportsOverrideには、mainが設定されているライブラリ、且つ、mainがあればよいものは書かなくてもよい
  • exportsOverrideのライブラリ名後に指定する、インストールディレクトリ?の記述は空でもよい。そうするとライブラリ名のディレクトリ以下に直接入る
  • dependenciesにはbowerやgithubにないライブラリも登録できる。が、hoge/index.js のようにインストールされる

Gruntfile.js

  • option:layoutは、いろいろ試した結果、byComponentにした

とまあ、

ひととおり静的にサイトを生成する環境はできましたが、結果、やってみたってだけって感じです。
これでいっこサイト作ってみましたが、なんかいまいちでした。

こういったツールは現在世の中にものすごくいろいろあり、日々なくなったり新しくできてたりしてます。
なにが正解っておそらくないと思うので、自身の制作における選択肢を広げる上で、今後もいろいろ検証していけたらなと思います。

現場からは以上です。


プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ