Memo

メモ > 技術 > 開発: 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 で終了できる
Memo

Advertisement
