読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

slimで外部ファイル(CSS, JS)をインクルードする方法

Slim

どうも!chuckです。

新しくフロントエンド系の制作を始めました。せっかくなので、Slimを使ってみたいと思います。

 

chuckwebtips.hatenablog.com

 

slimについてはこちらで導入や、基本的な使い方について書きました。

それでも、いざ使い始めてみると分からないことが多かったので記録します。

 

 

前回書いたslim

前回書いたslimはこちら。

gist10da6d6ca63a736e956d

 

非常にシンプルですね。

 

見てください、このheadタグを!

f:id:chuck0523:20150910223520p:plain

metaタグと、titleタグしかありませんね。

 

外部ファイルのインクルードについてまずは調べます。

 

外部ファイルのインクルード

linkタグ

css というか、linkタグはこんな感じらしい。

f:id:chuck0523:20150910224517p:plain

参考:File: README — Documentation for slim (3.0.6)

 

書いてみる。今回はmLayers.scssというファイルを用意。(これをコンパイルして作られるのが、mLayers.cssですね)

なのでこんな感じかな。

f:id:chuck0523:20150910225032p:plain

 

slimファイルをコンパイルしてみます。

コンパイルのコマンドはこんな感じでしたね!

f:id:chuck0523:20150910225409p:plain

 

変換した結果がこちら。

f:id:chuck0523:20150910225442p:plain

ちゃんとlinkタグが生成されています!やったね!

 

scriptタグ

次にJavaScriptをインクルードします。

JSのインクルードはscriptタグでしたね!まずはカンで書いてみます。

f:id:chuck0523:20150910230246p:plain

こんな感じでしょうか。

 

これをコンパイルするとこんな感じ。

f:id:chuck0523:20150910230546p:plain

できました!

 

いやあ、この記述が、

f:id:chuck0523:20150910225442p:plain

 

これだけで済んでしまう。

f:id:chuck0523:20150910230633p:plain

非常に便利ですね!

分量的にはそんなに変わらない感じがしますが、タグがないのでそれだけ早く書けますね。

 

まとめ

CSSファイル:

link rel="stylesheet" type="text/css" href="hoge.css"

JSファイル:

script type="text/javascript" src="hoge.js"

 

次回からは実際のslimコーディングに入っていこうと思います。