ローディング中

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

gulp_sass

こんにちは〜。

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

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

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

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

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

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

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

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

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

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

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

sassという名前のフォルダ

その中にstyle.scssファイル

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

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

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

cd /xxx/xxx/xxxx.xxx

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

screen

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

でいきましょう。

では早速、

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でセッティング

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

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

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

screen2

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を圧縮

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

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

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

 

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.