190 views

【1】やりたいこと

過去記事 (91) Node.js + gulpでSASSを Windows10で実行 を 4年ぶりにアップデートする。

新規インストールした Windows11パソコン上で Node.js + gulp 環境を作りたいときに、本記事の内容をコピペして使いたい。

【2】やってみる

(1) Node.jsをインストールする。

Node.jsの公式サイトからインストーラーをダウンロードする。
　→ インストーラーを起動し、インストールを実行する。

今回は、2024年5月1日時点の最新LTS板 Node.js v20.12.2 を使用する。
https://nodejs.org

インストールが完了したら、念のためにバージョンを確認しておく。

C:\>node -v
v20.12.2

C:\>npm -v
10.5.0

Q: npmとは？
　↓
A: npm (Node Package Manager)は、Node.jsで使うJavaScriptプログラムパッケージを管理するツール。

つまり…
「どこかで誰かが作ってくれた便利 JavaScriptプログラム」
を自分のパソコン上で簡単に使えるようにしてくれる便利ツールだ。

(2) 作業用フォルダを作る。

ここでは、C:\MyWork\WWWProject を作業環境として使う。

C:\>
C:\>mkdir MyWork\WWWProject
C:\>cd MyWork\WWWProject
C:\MyWork\WWWProject>

(3) 作業用フォルダに Node.jsの実行環境を作る。

cdコマンドで作業用フォルダに移動した後、パッケージマネージャー npm を使って環境を初期化する。

npm init -y

(4) gulpをインストールする。

gulpをローカル環境(=作業用フォルダ)とグローバル環境(=マシン全体)にインストールしておく。

npm install --save-dev gulp
npm install --global gulp-cli

ついでに、JavaScript, CSSファイルを minimizeしてくれる gulpプラグイン(=便利ツール)をインストールしておく。

npm install --save-dev gulp-uglify gulp-cssnano

Sassも入れておこう。

npm install --save-dev gulp-sass sass

(5) gulpファイルを書く。

gulpで実行するスクリプトファイル gulpfile.js を作業用フォルダの直下に作っておく。
このスクリプトファイルには、gulpプログラムに実行させる命令を書いておく。

var gulp        = require('gulp');
var minifyJs    = require('gulp-uglify');
var compileSass = require('gulp-sass')(require('sass'));

var sass_options = {
  outputStyle: 'compressed',    // 圧縮(=minimize)する。
  sourceMap: false,             // soucemapファイルを作成しない。
  sourceComments: false         // scssファイルに書いたコメントを除去する。
};

gulp.task('taskNo1', function(done) {
  var dest = './aaaaa/rel';    // 出力先ディレクトリ

  // Sass
  const src1 = './aaaaa/src/**/style.scss';    // 処理対象となる Sass入力ファイル
  gulp.src(src1).pipe(compileSass(sass_options)).pipe(gulp.dest(dest));  // Sass → Css変換実行

  // JavaScript
  const src2 = './aaaaa/src/**/*.js';          // 処理対象となる JavaScript入力ファイル
  gulp.src(src2).pipe(minifyJs()).pipe(gulp.dest(dest));  // JavaScriptの minimaize実行

  done();    // 親プロセスに処理終了を通知
});

説明：
1) /**/ は、フォルダの名前および階層のワイルドカードを表す。

つまり、
./aaaaa/src/**/*.js
と指定すれば、以下のいずれも処理対象ファイルとなる。
./aaaaa/src/script1.js
./aaaaa/src/AA/script2.js
./aaaaa/src/BB/CC/myscript.js

(6) gulpを実行する。

上記のタスク taskNo1 を指定して実行してみる。

gulp taskNo1

【3】応用

自分の場合、ファイル変更の自動検出＋スクリプト実行 が Gulp使用目的の90%超だ。
これについては 後日追記 する。

---