pug + stylus + gulp + webpack技術選定・行っていること
使っている言語
pug
理由
- htmlの閉じタグを書くのが面倒(エディタによっては補完してくれるものもあるけど。)
- 記載の行数・記載量が少なくて済む。(emmetとかでの補完もあるけど。)
.sample サンプル
<div class="sample"> サンプル </div>
↑簡単な例
- 閉じタグが何回も続いてしまうと関係性がわかりにくい
<div class="sample1">
<div class="sample2">
<div class="sample3">
<div class="sample4">
</div><!-- sample4 -->
</div><!-- sample3 -->
</div><!-- sample2 -->
</div><!-- sample1 -->
↑上の例以上になるとわかりにくい。
→インデント管理されていないと関係性がわからない。
→インデント管理を行うならpugでもいい気がする。（5-8行目も消せるので、コード量も減らせる）
- htmlで1行にいろいろあると関係性がわかりにくい
<div class="sample"><span class="sample_span"><small class="sample_small">テキスト</small></span></div>
.sample
span.smaple_span
small.sample_small テキスト
.sample: span.smaple_span: small.sample_small テキスト
pugでも1行だとわかりにくい・・・？ （一応右側見ればタグは分かるし、この例が特殊すぎるのかも・・・。）
<div class="sample"><span class="sample_span"><div class="sample-span-inner"><small class="sample_small">テキスト</small><span class="sample_span2">テキスト２</span></div></span></div>
.sample: span.smaple_span: .sample-span-inner small.sample_small テキスト span.smaple_span2 テキスト２
↑この場合テキスト２のspanエリアを消したいときhtmlだと迷う。
- 最初は
ブロック要素・インライン要素などの最低限のhtmlダグで書き、あとでsectionタグなどをつけやすい。（基本的にcssクラスなどもタグよりはクラス名で記載を行うので、変更後の影響も少ない）
<div class="sample"> <h2>タイトル</h2> </div>
↓
<section class="sample"> <h2>タイトル</h2> </secttion>
.sample h2 タイトル
↓
section.sample h2 タイトル
sampleの前にsectionを記載するだけでタグの変更を行う
stylus
理由
@mixin,@includeを書かなくて良い
@mixin sample () {
font: 16px;
}
.className {
@include sample();
}
sample() font 16px .className sample()
{},:;も書かなくて良い
上の例参考
→ これによりコードに記載する量を減らすことができる。
mixinもcssっぽくかくことができる
sample(size) font size .className sample 16px //これはmixinのものを使用 font 16px //これはベタに記載
→ 他の人が見ることをふまえるとみづらいけれども現状書きやすさを優先。
- ファイルの
importを毎回記載しなくても良い。
@import 'sample/reset.scss'; @import 'sample/util.scss'; @import 'page/top.scss'; @import 'page/about.scss';
@import 'sample/*' @import 'page/*'
→pageディレクトリの中は各ページの情報、sampleディレクトリは初期の情報をまとめたりするので、現状ディレクトリ内の読み込みの順番のエラーは出ない。
jquery
理由
現状一番書きやすいものとして選択。
(慣れて行けばVanillaかReactに変更していきたい。)
Vanilla
単純にjqueryを読み込まなくても良いので、速度が早くなる？
React
作って終わりのものだとそんなに利点はないかもしれないですが、storybookとかAtomic designの連携がやりやすそうなので、、
ビルドで行っていること
gulp
- webpackを通す
- pugをhtmlに変更
- stylusをcssに変更
- image,fontを任意のディレクトリに入れる
- staticのものはtopに入れる(faviconなど)
- 変更を検知して自動読み込み
webpack
- jsのビルドを行う
ビルド具体的に
開発環境
確認用コマンド
npm run test
html
基本的な形
css
1行に圧縮(ソースマップあり)
js
ビルドのみ(ソースマップあり)
理由
作業するときにソースマップがあった方が見やすい。 現状jsについてはエラーしてもgulpが止まらないことを確認&エラー箇所を見ることができるように設定。
本番環境
確認用コマンド
npm run build
html
1行に圧縮
css
1行(ソースマップなし)
js
1行(ソースマップなし)
理由
ビルド後のものを触ることは基本的に触ることがないと思ったので、本番環境では無駄を無くして少しでも早く読み込むが行われるように以上のように変更しています。
