aicocco's PhotoLog

Sassとgulpのハンズオンin岡山 参加レポート

by aicocco/かんろ

岡山でSassとgulpのハンズオンがあったので、参加してきました。
復習をかねて個人的なレポートです。

今回はSassいじってみたり、gulpでwatchとかbrowser-syncとか色んなコマンドを組み合わせて実行させてみる、というのをメインにやりました。

Sassも先週からやっと使い始めたばかりで黒い画面こわい状態だったので、大丈夫かなーと不安でしたが色々サポートしてもらってなんとかgulp動かすところまでできました!
普段黒い画面使っていないと少し難しい部分もあったので、何回か練習してみてちょこっとつかめた気がします。


事前準備

・Sassの教科書読んでおく(途中までしか読んでなかったけど)
・Node.jsインストール


やったこと

・Sassをいじってみる
・sassをwatchしてcssに反映されるように
・browser-sync
・gulpをインストール
・Gulpfile.jsとpackage.json
・Sassの便利な機能いろいろ
・Flexbox


詰まったこと

・ついsudo打ち忘れてエラーでまくって少し焦った
・browser-sync起動させたらcannot get / 見てるディレクトリが違った?っぽい
・Gulpfile.jsとpackage.jsonを置くディレクトリを間違ってエラー
・Error in plugin 'gulp-sass'  Message: scss/style.scss〜ていうエラー / Sassの記述間違ってた


やってみた感想

Sassをwatchする、までしかまだやっていなかったのでbrowser-syncでリアルタイムにSassの変更が反映されるのはちょっと感動ました。
タスクランナーを使うと色んなコマンドツールを実行してくれて便利!
Gulpfile.jsが少し難しかったです、けど今回作ったファイルを使ってタスクランナーできるようになったのが嬉しい。

Gulpfile.jsはほとんどコピペで作ったけど、書いてある内容を見ておかないとエラーが出た時にちょっと困るなぁっていうのが分かりました。
今回のはコードの量少なかったので、説明してもらってどうにか覚えれそうな感じです。

ターミナルでエラーがでたら焦っちゃうけど、エラーメッセージをきちんと読めば大丈夫と教えてもらったので焦らずに何が書いてあるのか読むのが大切。Google先生に頼ってちゃんと読もうと思います。


番外編でFlexbox

Sassのあとに少し時間があったので、CPIの阿部さんがFlexboxの説明をしてくれました。
前日にFlexbox使い始めてて良かった...!
プロパティがちょっと難しいイメージがあったのだけど、flex-containerとflex-itemに対してどのプロパティが使えるのか覚えてたら楽そうでした。

プロパティの数が12個しかないのも意外、もっといっぱいあるのかと思ってた。
一部media queries使うとすごい柔軟に作れて便利。
今途中まで作ってたサイトをFlexboxで作り直したいと思うくらい便利!
Sassと一緒にFlexboxもどんどん使っていきたいところ。


今回は最後にあいこじゃんけんで残って、前川さんから本をもらえました!
普段の岡山WEBクリエイターズではスタッフで、あいこじゃんけんに参加できないので嬉しかったです。

結構詰まりながらだったので、何回かやってみないと覚えれない気もするけど、便利さは体感できたので、Sassとgulp & Flexboxをどんどん使っていきたいなー!と思います。


このエントリーをはてなブックマークに追加