メモ > 技術 > 開発: Gulp > Gulpの導入（SASSのコンパイルまで）
■Gulpの導入（SASSのコンパイルまで）
タスクランナーと呼ばれるもので、作業を自動化するツールの一つ
SASSを自動でコンパイルしたりする
絶対つまずかないGulp 4入門(2022年版) - インストールとSassを使うまでの手順 - ICS MEDIA
https://ics.media/entry/3290/
最新ビルドシステムGulp 4入門 〜環境構築からタスク作成まで〜 - Qiita
https://qiita.com/tonkotsuboy_com/items/9ab83fe0f25cf0b010f3
Gulp4がリリースされたのでgulpfile.jsをアップデートした - Qiita
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b
2019年版：Gulp4でSassをビルドしてBrowserSyncでライブプレビューする - Qiita
https://qiita.com/KazuyoshiGoto/items/3059c99330cdc19e97ad
Gulp4の変更点と新しい書き方 - Qiita
https://qiita.com/manabuyasuda/items/0971dbd3729cf68f87fb
Gulp4で作業爆速化！オススメ設定を公開する【コピペOK】 - ブログの設置
https://flex-box.net/gulp/
gulp4に移行するためにタスクを書き換えてみた ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
https://magnets.jp/web_design/10404/
VSCodeでGulpを実行しJavaScriptとSassをビルドしてBrowserSyncでライブプレビューする方法 - Qiita
https://qiita.com/KazuyoshiGoto/items/d00ccfcbc3d27c9eb3f6
2022年6月にIEが終了したので、以下のような意見もある
IEが終了したので、webpackやbabelは不要？ - Qiita
https://qiita.com/access3151fq/items/42b38635d81aad786e60
■導入
Node.js
https://nodejs.org/ja/
WindowsでElectronからNative Moduleを使えるようにする - Qiita
https://qiita.com/maron8676/items/4457b4d70be6db260eee
Node.js をインストール
手順中の「Tools for Native Modules」の画面では、「Automatically install the necessary tools.」にチェックを入れずに進める（デフォルトのまま）
>node -v
v14.15.0
C:\Users\refirio\gulp-test を作成しておく
以降、gulp-test を作業フォルダとする
>cd C:\Users\refirio\gulp-test
>npm init -y
package.json が作成される。作成された内容は以下の通り
{
"name": "gulp-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
以下のコマンドでインストール
>npm install -D gulp
node_modules フォルダが作成され、その中に必要なファイルが作成される
（「-D」は「--save-dev」の略）
■「npm install -D gulp」でエラー
作業フォルダ名を「gulp」にすると、package.json 内の「name」が「gulp」になり、
この状態だと「npm install -D gulp」実行時に以下のエラーになる
>npm install -D gulp
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-D" "gulp"
npm ERR! node v6.5.0
npm ERR! npm v3.10.3
npm ERR! code ENOSELF
npm ERR! Refusing to install gulp as a dependency of itself
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\refirio\gulp\npm-debug.log
■SASSのコンパイル
>npm install -D gulp-sass
node_modules フォルダ内に、必要なファイルが追加作成される
package.json と同じ場所に sass フォルダを作成する
さらに sass フォルダ内に style.scss を作成し、以下の内容を記述する
// ネストのテスト
div {
p {
font-weight: bold;
}
}
// 変数のテスト
$fontColor: #525252;
h1 {
color: $fontColor;
}
package.json と同じ場所に gulpfile.js を作成し、以下の内容を記述する
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp
.src('sass/style.scss')
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(gulp.dest('dist/css'));
});
以下のコマンドでコンパイル
>npx gulp
css フォルダ内に、style.scss をもとにコンパイルされた style.css が作成される
上の例はタスク名が「default」だが、それ以外の名前をつけた場合「npx gulp タスク名」と実行する
なお、Gulp3からGulp4に変更するにあたり、以下の変更が必要（コンパイルされたが警告が表示された）
gulp
↓
return gulp
■「npx gulp」でエラー
npx は npm v5.2 から使えるコマンド
npx が使えなかった場合、npm をバージョンアップする
>npx gulp
'npx' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
>npm -v
3.10.3
>npm install -g npm
>npm -v
5.6.0
■watchでSASSの自動コンパイル
gulpfile.js を以下のように変更する
（「gulp.watch」を追加）
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('default', function() {
return gulp.watch('sass/style.scss', function() {
return gulp
.src('sass/style.scss')
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(gulp.dest('dist/css'));
});
});
以下のコマンドでコンパイル
>npx gulp
style.scss が監視され、変更があれば自動でコンパイルされる
Ctrl+C で終了できる