236 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%超だ。
これについては 後日追記 する。