Gulpでsassのコンパイルを自動化!快適な作業環境を整えよう!

Gulpでsassのコンパイルを自動化!快適な作業環境を整えよう!

こんにちは〜。

最近寝不足でニキビが出来てきた金澤です。

awesomeのリーちゃんがくれるみかんが、僕のビタミン源です。

さて、前回はgulpを導入して簡単な命令を実行しよう

みたいな事を書きましたけども、

同業の友人に『普通にめっちゃありがたい!

と言われ、少しでもお役に立てているようで嬉しかったです。

というわけで、今日は前回の最後にお話ししました、

sassのコンパイルを自動化するというお題です。

command + Sでポンっとcssが吐き出されるのは快感ですよ♪

是非、読んでみてください。

まず準備として作業フォルダ内に

sassという名前のフォルダ

その中にstyle.scssファイル

を作成しておいて下さい。

Gulpプラグインgulp-sassをインストール

まず、前回同様、ターミナルで作業フォルダに移動しましょう。

cd /xxx/xxx/xxxx.xxx

で移動してもいいですが、

Gulpでsassのコンパイルを自動化!快適な作業環境を整えよう!

右クリック→サービス→フォルダに新規ターミナルタブ

でいきましょう。

では早速、

sudo npm install gulp-sass --save-dev

と打ちgulp-sassをインストール。

実は

sudo npm i -D gulp-sass

でもいけます。

install → i

–save-dev → -D

こんな感じで短縮出来ます。

出来ましたらpackage.jsonを確認してみましょうか。

gulp-minify-cssは前回インストールしたプラグインです。

はい。インストールされましたね。

gulpfile.jsでセッティング

インストールしただけでは使えませんので、

自分でセッティングしてやりましょう。

ちなみに現在ファイル階層はこんな感じです。

Gulpでsassのコンパイルを自動化!快適な作業環境を整えよう!

gulpfile.jsと同じ階層にsassフォルダとcssフォルダがあります。

この状態でgulpfile.jsファイルに

と追加しました。

ちなみにgulp-sassの実行をするところ

outputStyleexpendedにすると

いつもの見た目のcssの書き方でコンパイルされます。

gulp-sassを実行してみよう

設定が終わりましたら実際にやってみましょう。

まずscssファイルにこんな感じで書きました。

テストなので内容は適当です。

保存した後、

gulp sass

と入力するとcssフォルダの中に

コンパイルされたcssが吐き出されます。

中身を確認してみましょう。

オッケーですね。

あれ?@charsetが消えてる?

@charsetが消えてるのは、日本語の使用がないからです。

気になる方はsassのコメントアウト//テキストではなく

cssのコメントアウト/*テキスト*/を使うか、

font-familyの指定で日本語を使用されると思いますので、

そちらで試してみてください。

sassコンパイルの自動化

今のままでは

編集→保存→コマンド→吐き出し

って感じで全然便利じゃないですよね。

そんな時はwatchを使います。

その名の通り任意のファイルを監視して、

変更があった時に指定した処理を実行してくれます。

watchは初めから使えますので、インストールはいらないです。

gulpfile.jsファイルに、タスクの登録だけしましょう。

こんな感じで登録しました。

早速、監視状態にしましょう。ウォッチ!ウォッチ!

gulp watch

その後、scssファイルを編集してみます。

20%→10%。そして上書き保存。

さぁ、cssファイルに反映されているでしょうか。

ちゃんと反映されてますね。

監視状態を解除したい時は

control + C

で、解除出来ます。

最後に

今日はsassコンパイルの自動化までいきましたね。

実は一つのコマンド

watchしてsassコンパイルを自動化し、吐き出されたcssを圧縮

出来るようにもカスタム出来るんです。

また、ご紹介したいと思います!

ありがとうございました^^

 

Instagram Feed

Load More

Instagram

コーダー

yu.kanazawa

シンガー、俳優とクリエイティブな活動をしながら、アルバイト、会社員、ニート、個人事業主経て株式会社awesomeに所属。関わる人に楽しさを提供する事を信条に掲げ、0ベースからビジネスを創れるように、奮闘中です。

他の投稿を見る →