Gulpを使ったsassの自動コンパイルと自動ブラウザ更新

お疲れ様でーす。kiokaでーす。

ねむたいいいいいいいいいい。。。

最近やる気がでない私ですが、少しでもやる気をだそうとブログを書いております。

この前投稿した、

という記事の続きでGulpを使ったsassの自動コンパイルと自動更新の説明ができたらいいなと思います。

sassの書き方はまたの機会に記事にしようとおもいます(´・ω・`)

では、いこー！

まずはsassを自動コンパイルしてくれるありがたいプラグインとブラウザを自動更新してくれるさらにありがたいプラグインをいれます。

ターミナルのディレクトリをProjectFileに移動します。

私の場合だとデスクトップにprojectFileがありますので、ターミナルはこのようになります。

projectFile名が今回はtest01となっているので上記のようになります。

移動した次は、sassのプラグインをインストールします。

ターミナルで、

npm install --save-dev gulp-sass

と打ち込んで、エンターを押して下さい。 

これでsassのプラグインのデータは入りました。

次に、ブラウザ自動更新のプラグインを入れたいと思います。

ターミナルに、

npm install --save-dev browser-sync

と打ち込んで、エンターを押して下さい。

これで必要なプラグインは入れることができました(*´艸｀*)

では、そのプラグインを使える状態まで持って行きましょう！

まずsassから始めます。手始めに、projectFileにsassとcssというディレクトリを作ってください。

元からあったstyle.cssはcssのディレクトリに入れておきましょう。

そして次にgulpfile.jsというファイルを作成してください。

この中身はまだ空でおっけーです。

こん感じですね。cssのディレクトリにはstyle.cssが入っています。

では次に、gulpfile.jsをエディッターソフトで開いて下さい。

そしたら下記のように打ち込んで保存をしてください。

これで、sassのディレクトリ内のscssfileを編集した場合自動的にcssにコンパイルしてくれます。

やったー＼(^o^)／

では、次にブラウザの自動更新のプラグインを導入していきましょう！

このコードに追加で下記のように編集してください。

これで編集中のデータをエディッタ上でコマンドSするだけで、自動更新！

スバラシイ(*´艸｀*)

これでsassの自動コンパイルとブラウザの自動更新方法の記事は終わりです。

また次回よろしくお願いしやす。ではでは！

【追記】

このコードではscssFileを間違って保存してしまった場合、ターミナル上でgulpの自動処理がとまってしまいます。

なので、plumberなどの処理を続けさせるプラグインを入れる必要性がございます。

私自身まだうまくできてないので、できたら記事にしてみますが。

皆様個々でやってみてもいいかもしれません。

失礼しましたm(_ _)m