gulpでsassをcssへコンパイル

2021.7.23

2021.7.26

今までは、vscodeのプラグイン『Live Sass Compiler』を使ってコンパイルをしていますが
gulpでのコンパイルが普及してきたので、実際に簡易的な環境構築しました。

もっとカスタマイズしたい場合は、こちらを参考して下さい。
これだけは入れておきたいGulpタスク３選

Node.jsをインストール

Node.jsが必須なので、インストールしましょう。
Node.jsの公式サイトにアクセスしインストーラをダウンロードします。
左側にあるTLSのインストーラをダウンロードします。
ダウンロードできたらインストーラを起動し、インストールします。

ターミナルでバージョンを確認。
確認できれば正常にインストールされています。

node -v

gulp-cliをインストール

使っているパソコンにgulp-cliをインストールします。
gulpがインストールされているか確認。
確認できれば正常にインストールされています。
※これは、一度だけインストールすれば大丈夫です。

gulp -v

Sassを使いたいディレクトリ下でコンパイルするための環境構築

環境構築をしたいディレクトリでpackage.jsonを作成します。

npm init -y

同じディレクトリでgulp、gulp-sass、sassパッケージのインストール

ターミナルで以下を実行します。

npm install --save-dev gulp 
npm install --save-dev gulp-sass
npm install --save-dev sass

package.jsonに以下のような記述がされます。

"devDependencies": {

"gulp": "^4.0.2",

"gulp-sass": "^5.0.0",

"sass": "^1.35.2"

gulpfile.jsの作成

gulpfile.jsを作成し以下を記述します。

var gulp = require("gulp");　//gulpパッケージを読み込む
var sass = require('gulp-sass')(require('sass')); //gulp-sassとsassパッケージを読み込む

gulp.task("sass", function(done){ //gulpで動かす内容を記述
  gulp.src("./sass/**/*.scss")　//コンパイルしたいsassファイルの指定
  .pipe(sass({outputStyle: "expanded"})) //コンパイルしたcssの記述フォーマット
  .pipe(gulp.dest("./css")) //コンパイルしたCSSファイルを出力する場所の指定
  done(); //パラメーターdoneをとってコールバックを行うことで、task内の処理の終了。
});

SassをCSSにコンパイル

sassフォルダ作成しフォルダ内にscssファイルを作成しときます。

ターミナルで以下を実行。

npx gulp sass

cssフォルダとそのフォルダ内にcssのファイルが生成される。

自動コンパイル設定を追加

gulpfile.jsに下記コードを追加記述します。

gulp.task("watch", function(){
  gulp.watch("./sass/**/*.scss", gulp.series(["sass"]))
});

ターミナルで以下を実行。変更があれば自動でコンパイルされます。

npx gulp watch

自動コンパイルを停止したいときは、コマンドプロンプト画面で『 ctrl + c 』を押せば停止します。

エラー時にWatchを停止させない方法

自動的にコンパイルしてくれるようにはなりましたが、記述ミスでコンパイルエラーになるとwatchタスクが止まってしまいます。　そのため、エラーが出ても監視を停止しないように設定する必要があります。

「gulp-plumber」パッケージをインストールします。

npm install --save-dev gulp-plumber

インストールしたら、gulpfile.jsに記述を追加します。

var gulp = require("gulp");
var sass = require('gulp-sass')(require('sass'));
const plumber = require('gulp-plumber');//gulp-plumberを読み込み

gulp.task("sass", function(done){
  gulp.src("./sass/**/*.scss")
    .pipe(plumber())//「gulp.src」の直下に追記
    .pipe(sass({outputStyle: "expanded"}))
    .pipe(gulp.dest("./css"))
  done();
});

gulp.task("watch", function(){
    gulp.watch("./sass/**/*.scss", gulp.series(["sass"]));
});

これでエラーが出てもwatchタスクが止まらないため
エラーが出てもコマンド『npx gulp watch』を入力する手間が無くなりました。

もっと早く環境構築する

npmのコマンド使う際に『&&』を使って繋げると連続して実行できます。
以下を実行すると1~3を連続実行する。
1. package.jsonを作成。
2. gulp、gulp-sass、sassパッケージのインストール。
3,gulp-plumberパッケージのインストール。
4, gulpfile.jsを作成。

npm init -y && npm install --save-dev gulp && npm install --save-dev gulp-sass && npm install --save-dev sass && npm install --save-dev gulp-plumber && touch gulpfile.js

そしてgulpfile.jsに以下を記述。

var gulp = require("gulp");
var sass = require('gulp-sass')(require('sass'));
const plumber = require('gulp-plumber');

gulp.task("sass", function(done){
  gulp.src("./sass/**/*.scss")
  .pipe(plumber())/
  .pipe(sass({outputStyle: "expanded"}))
  .pipe(gulp.dest("./css"))
  done();
});

gulp.task("watch", function(){
  gulp.watch("./sass/**/*.scss", gulp.series(["sass"]))
});

ターミナルで以下を実行。

npx gulp sass && npx gulp watch

これですぐ作業に入れます！
かかる時間は、数分なので問題ないです。
sassのコンパイルエラーは、ターミナルに表示されますのでうまくいかないときは、ターミナルをチェックして下さい。

記述補足

『install』は、『i』、『–save-devは、『-D』と省略できます。
例
npm install –save-dev gulp-plumber
npm i -D gulp-plumber