gulpでSass環境構築とエラー紹介

前提

Nodeはインストール済とします。

作業

プロジェクトのホームディレクトリから下記のコマンドを叩いて、package.jsonを作成します。

$ npm init -y

gulpを使用してsassの環境を構築していくので、下記のコマンドを叩いてインストールを行う。

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

次に同じ階層にgulpfile.jsを作成して以下のように記述。

gulpfile.js

var sass = require('gulp-sass')(require('sass'));
var gulp = require('gulp'); 

gulp.task("sass", function(done){
    gulp.src("./sass/**/*.scss")
    .pipe(sass({outputStyle: "expanded"}))
    .pipe(gulp.dest("./css"));
    done();
});
// 下記の設定で自動コンパイルをすることができる。
gulp.task("watch", function(){
  gulp.watch("./sass/**/*.scss", gulp.series(["sass"]))
});

sassのディレクトリを作成して、中にscssなどのファイルを作成した後に下記のコマンドでコンパイル。

$ npx gulp sass

自動コンパイルはこちら

$ npx gulp watch

遭遇したエラー

其の１

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

[21:46:51] The following tasks did not complete: sass
[21:46:51] Did you forget to signal async completion?

gulpfile.jsのvar sass部分の記述方法をエラー文の通りに変更すれば解決しました。

其の２

Error: Cannot find module 'sass'
Require stack:
- /Users/***/practice/error_gulp/gulpfile.js
- /Users/***/practice/error_gulp/node_modules/gulp-cli/lib/shared/require-or-import.js
- /Users/***/practice/error_gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
- /Users/***/practice/error_gulp/node_modules/gulp-cli/index.js
- /Users/***/practice/error_gulp/node_modules/gulp/bin/gulp.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)

gulpのsassをおとなしくインストールしたら、解消しました。

$ npx gulp sass

【備考】
Nodeとgulpのバージョンの相性が悪いと、エラーが出てしまう事があるようです。