GULP でSASSをコンパイルする方法

2021年7月21日GULP

GULP でSASSをコンパイルする方法を紹介します。

GULP でSASSをコンパイルする手順

• sassとgulp-sassをインストール
• gulpfile.jsに記述

sassとgulp-sassをインストール

npm install sass gulp-sass --save-dev
or
yarn add sass gulp-sass --dev

上のコマンドで、devDependensiesにインストールします。

gulpfile.jsに記述

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

gulp.task("sass", function() {
  return gulp
    .src("./src/sass/main.scss")
    .pipe(sass())
    .pipe(gulp.dest("./dist/css"));
});

srcが参照先のフォルダ、destが保存先のフォルダで、それにサンドイッチしてsassを実行することでdist/cssフォルダにmain.cssが作成されます。

sassのインストールがまだの場合

yarn global add node-sass

sass自体がまだ使えない場合は、グローバルでsassが使えるようにします。（1回やれば不要）
使える場合はこのコマンドは不要です。

よくあるエラー

The following tasks did not complete: sass
Did you forget to signal async completion?

node-sassをインストールするとバージョン次第でエラーが出ることがあります。
そのため、sassをdevDependenciesにインストールします。

npm install sass --save-dev
or
yarn add sass --dev

そして、sassを変数定義するときに、

// const sass = require('gulp-sass');
const sass = require('gulp-sass')(require('sass'));

上ではなく、下のようにして記述します。

sassファイルの指定方法

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

gulp.task("sass", function() {
  return gulp
  // not-compile.scss以外をコンパイル
    .src(["./src/sass/**/*.scss", '!./src/sass/not-compile.scss'])
    .pipe(sass())
    .pipe(gulp.dest("./dist/css"));
});

上の場合、not-compile.scss以外がコンパイルされます。
*.scssはすべてのファイルを意味します。
**/*.scssはそのフォルダの子ファイルとフォルダすべてのファイルを意味します。
!*.scssもしくは!**/*.scssはそれ以外を意味します。
複数条件にしたいときは、配列にして指定します。

source-mapsを追加する

source mapを追加すると、scssファイルの記述が検証ツールで確認できて使いやすくなります。

gulp-sourcemapsをインストール

gulp-sourcemapsをインストールします。

npm install gulp-sourcemaps --save-dev
or
yarn add gulp-sourcemaps --dev

gulpfile.jsに記述

const gulp = require("gulp");
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require("gulp-sourcemaps");

gulp.task("sass", function() {
  return gulp
  .src(["./src/sass/**/*.scss", '!./src/sass/not-compile.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("./dist/css"));
});

sassファイルのsource mapsを作成したいので、sass()をサンドイッチします。
init()の後から、writeの前までの部分で作成されます。