【slim】静的サイトのコーディングが捗る！【導入編】
こんにちは！
コーディングのやり方は、それぞれ決まったものがあると思いますが、何かしらのテンプレートエンジンを使っている方も多いのではないでしょうか。
今回私の愛する「slim」についてまとめておきます。
昔から私はコーディングが遅くて、時間ばかりかかっていました。
なんとか早くならないものかと、emmetを導入したりsass導入したりしましたが、このslimを知ってから爆速になりました！
導入
slimを使用するには、rubyが必要です。またコンパイルを自動化するためにgulpを導入します。
黒い画面が怖い！・・・という場合は、
mac限定ですがcodekitという便利ツールもあります！私も最初はこれでした。
（GUIでわかりやすい。英語。有料）
ですがターミナル（黒い画面）からのインストール手順を（すみません）
まずはrubyの確認
今入っているrubyを確認してみます。
ruby -v
下記のようにバージョンが出てくればOKです！
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]
slimのインストール
次にslimをインストールします。
gem install slim
完了！
ね、簡単でしょ？
という訳ではなく、
これでコンパイルはできるようになりましたが、これだといちいちターミナルから実行しないといけません。
それは相当めんどクサイので、これを素敵に自動化するためにgulpを導入してみます。
gulpを導入する
これについては調べたら詳しい記事がわんさか出てくるので簡単に。。。
nodeがインストールしてある場合は一度アンインストールしてください。
homebrewでインストール済みの場合：
brew ls // npmが出てきたら下記でアンインストール brew uninstall --force node
npmでインストール済みの場合：
npm ls -g node // nodeが出てきたら下記でアンインストール npm uninstall -g npm
homebrewをインストール
すでに入っている場合は飛ばしてください！
公式に載っているコードです。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
↑これをターミナルにコピペしてenter
nodebrewをインストール
ターミナルに下記を入れる。
brew install nodebrew
node.jsをインストール
インストールできるバージョンを確認
nodebrew ls-remote
すると、だーーーーとバージョンが出てくるので、新しいやつをインストールする。
（「記事を書いている時点だとv13.7.0 ）
nodebrew install-binary v13.7.0
インストールしたら確認
$ nodebrew ls v13.7.0 current: none
使うバージョンを指定する。
$ nodebrew use v13.7.0
もう一度確認
$ nodebrew ls v13.7.0 current: v13.7.0
プロジェクトフォルダに移動
では、ターミナルで任意のフォルダに移動します。
$ cd //☆☆☆ここにフォルダをFinderからドラッグ＆ドロップする☆☆☆
npm install -D gulp //package.json生成
Gulpのインストール
npm install -D gulp
gulp-slimのインストール
sudo npm install --save-dev gulp-slim
これで、slimを使う準備OKです！
あとはgulpfile.jsでgulp-slimを読み込んで、実行させるコードを書くだけです！
var slim = require('gulp-slim');
gulp.task('slim', function(cb) {
gulp.src("./*.slim")
.pipe(slim({pretty: true}))
.pipe(gulp.dest('./'));
cb();
});
コメントを残す