【Gulp】sassの環境づくり

gulpでsassの環境だけを構築したかった時の備忘録。
※Gulpを扱える環境が既にある場合を想定。
※備忘録的なモノなので動くかどうかの確認はしてはない。

sassの環境づくり

まず、構築環境図。

/resources // 名称は任意でok
├── package.json
├── gulpfile.js
├── /sass
　　　└── style.scss
├── /css
├── package-lock.json
└── /node_modules

作る必要があるのは以下。

• /resourcesディレクトリ
• gulpfile.jsファイル
• sassディレクトリとstyle.scssファイル
• cssディレクトリ

他は、以下の流れに沿って行けば勝手に作られる。

package.jsonを作る

まずは、cdコマンドで/resourcesまで行く。
そして、npm initを叩くとpackage.jsonが作られる。

次に、以下コマンドでパッケージをインストール

npm install --save-dev gulp
npm install --save-dev gulp-sass
npm install --save-dev sass
npm install --save-dev gulp-plumber
npm install --save-dev gulp-sass-glob

npm i -D gulp
npm i -D gulp-sass
npm i -D sass
npm i -D gulp-plumber
npm i -D gulp-sass-glob

※どっちも同じ意味、-Dは--save-devのショートカット

gulpfile.jsに記述をする

そしたら、gulpfile.jsに以下をコピペ

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

// sassをcssに変換
gulp.task("sass", function(done) {
  gulp.src("./sass/**/*.scss")
    .pipe(plumber())
    .pipe(sassGlob()) // Sassの@importにおけるglobを有効にする
    .pipe(sass())
    .pipe(gulp.dest("./css"));
  done();
});

// sassの常時監視、変更があったら変換する
gulp.task('watch-files', (done) =>  {
  gulp.watch(`./sass/**/*.scss`, gulp.series(["sass"]));
  done();
});

// 「npx gulp」叩けば動くようにする記述
gulp.task('default', 
    gulp.series(gulp.parallel(
        'watch-files','sass',
    ), (done) => {
    done();
}));

コピペ終わったら、npx gulpを叩けば動く。