GulpでSassを使おう 【忘備録】

こんばんは。
研修でGulpについて触れたので、その忘備録として記事にまとめます。
内容としては、Gulpを使ったSassのコンパイル方法などです。
今現在、VSCodeのwatch Sassを使って、Sassをコンパイルしている方は参考になるかと思われます。
また、この記事で至らない点などございましたら、優しく教えていただけると幸いです。(豆腐メンタル故)

Gulpとは。

Gulpは様々な処理を自動化してくれるタスク自動化ツール(タスクランナー)です。
例えば、sassを編集すればコンパイルを実行する、画像を編集すれば画像を圧縮するなどの手間がかかります。
Gulpを使うとこのようなWeb制作での面倒な処理が自動で行われるので、開発の時短に繋がります。
今回は、sassのコンパイルを自動化する処理をしていきます。

1. Node.jsのインストール

まずは、Gulpを動かす為の準備としてNode.jsをインストールしましょう。
Node.jsをインストールすることにより、ターミナルでJavascriptを実行できるようになります。

下記のリンクからサイトに飛べます。
Node.jsの公式サイト ⇨ https://nodejs.org/ja/

インストールできたら、ターミナルを開いて、バージョン情報が出たらOKです。

npm -v //このコマンドを実行
6.4.1

2. ディレクトリを作る

gulp、sassをインストールする為のディレクトリを作っていきます。
デスクトップに移動して、フォルダを作っていきましょう。
(主は、ターミナルでやりました)

mkdir gulp-study //デスクトップ上に、gulp-studyフォルダを作成
cd gulp-study //gulp-studyフォルダに移動

これがデスクトップ上にできて入ればOKです

3. Gulpのインストール

さて、いよいよGulpをインストールしていくのですが、その前に数点やることがあります。
ここではターミナルを使います。(Windowsの方はコマンドプロンプト)

まず、package.jsonを作成しましょう。
以下のコマンドを打って下さい。

npm init -y

このコマンドを打つことにより、package.jsonを作成します。
本格的な説明は割愛しますが、json形式で記載されたインストールしたパッケージを管理するための目録のような情報です。
フォルダができているか、確認しましょう。

gulp-studyフォルダ内に、このファイルを生成されて入ればOKです。

お待たせしました。
Gulpをインストールしていきます。
以下のコマンドを叩いて下さい。

npm install gulp --save-dev

package.jsonファイルを見て、devDependenciesにgulpの記載があれば、OKです！

4. gulpfileを作成

gulpのインストールができたら、gulpfileを作っていきましょう。

touch gulpfile.js //touchコマンドでファイルが生成できる

このgulpfileには、gulpで実行したい処理を記述していきます。

gulp-studyフォルダ内に、上記のファイルが生成されていればOKです！

gulpfile.jsが生成できたら、以下のコードをgulpfile.jsに記述して下さい。(コピペでもOK)

const gulp = require('gulp'); //requireでgulpを読み込む
gulp.task('default',(callback) => { //タスク名と実行する処理を記述
    console.log("Hello World!");
    return callback(); 
});

記述ができたら、以下のコマンドを実行しましょう。
(このコマンドでgulpfile.jsに記述した処理を実行します)

npx gulp

実行して、上記のような結果になったらOKです！
console.logで書いたHello World!が出力されていますね

5. GulpでSassを実行する

GulpでSassを実行できるようにインストールしていきましょう！
以下のコマンドを叩いて下さい。

npm install gulp-sass --save-dev

package.json内に、gulp-sassの記述があれば、OKです！

次に、gulpfileにsassを実行する為の記述をしましょう
以下のコードを書いて下さい。(コピペでもOK)

const sass = require('gulp-sass');
gulp.task('sass', () => {
   return gulp.src('src/scss/**/*.scss')
   .pipe(sass())
   .pipe(gulp.dest('dist/assets/css/'));
});

この時点で、gulpfile内が以下の画像のようになって入ればOKです

sassを実行する記述をしても、ファイルがないとどうしようもありませんね。ということで、ファイルを作っていきましょう。
(主はターミナル使用)

mkdir src //srcフォルダを生成
cd src //srcディレクトリに移動
mkdir scss //scssフォルダを生成
cd scss //scssディレクトリに移動
touch style.scss //style.scssファイルを生成

現在のディレクトリ構成は以下の画像の通り

ここまできたら、sassファイルに適当にスタイルを書いて見ましょう。
私は、bodyにbackgroundを記述しました。(なんでもいい)

body{
    background-color:red;
}

では、sassを実行してコンパイルしてみましょう。
以下のコマンドを叩いてください。

npx gulp sass

コマンドを叩いたら、gulp-studyディレクトリ上で、distフォルダが生成されていて、その中にassets、cssフォルダ、として、style.cssファイルが生成されています。生成されて入ればコンパイル成功です！

6. Watch機能を使って、Sassファイルを自動でコンパイルする

はい。
gulpでsassが実行できました。
しかし、ここからが一番の肝です。
先ほどのコマンドでコンパイルできても、スタイルを編集するごとにあのコマンドを打っていては、面倒極まりないですよね。
そこでwatchメソッドを使用して、ファイルを常に監視して、変更があったら自動でコンパイルできるようにしていきましょう。
これができれば、VSCodeのwatch sassともさよならです。

gulpfile.jsファイルに以下のコードを追記して下さい。

gulp.task('watch', ()=> { 
   gulp.watch('src/scss/**/*.scss', gulp.series('sass'))
});

この記述で、gulpfileで指定したsassファイルを常にwatch(監視)してくれるようになります。
ここまででgulpfile.jsは下記のような状態になります。

最後に、以下のコマンドを打って下さい。

npx gulp watch //watchする   

このコマンドでgulpfile.jsに先程、記述したwatchメソッドを実行します。

上記の状態になっていれば、OKです。

この状態で、style.scssファイルを編集してみましょう。
編集前のstyle.scssの記述↓

コンパイルされたstyle.cssファイルの状態↓ (参考ディレクトリ ⇨ dist/assets/css/style.css)

これがwatchを使っているので、style.scssを編集すると

style.cssも自動でコンパイルされるようになりました！

最後に。

お疲れ様でした。
皆様が無事に、最後までたどり着けたら幸いです。
不明な点などは、以下からHayahshiまでDMを投げてくれると嬉しいです。
https://twitter.com/mc_ohayasu