2024-09-05

🔷nvmとNode.jsのインストール

Node.jsをインストーラーでインストールしてみたが、今後のことを考えるとバージョン管理ツールを使用したほうが良さそう。

ということで、インストーラーでインストールしたNode.JSはアンインストールし、Node.jsのためのバージョン管理ツールであるnvmをインストール、nvmでNode.jsをインストールする。

nvmのインストール

zipファイルを解凍し、nvm-setup.exeを起動し、インストールを完了する

nvmがインストールされていることを確認

code:text

$ nvm version

1.1.12

Node.jsのインストール

最新の安定版をインストールする

code:text

$ nvm install latest

22.8.0

Downloading node.js version 22.8.0 (64-bit)...

Extracting node and npm...

Complete

npm v10.8.2 installed successfully.

Installation complete. If you want to use this version, type

nvm use 22.8.0

ダウンロードしたNode.jsを使用できるようにする

code:text

$ nvm use 22.8.0

Now using node v22.8.0 (64-bit)

Node.jsが使えるようになったことを確認

code:Node.jsのバージョン確認

$ node -v

v22.8.0

code:npmのバージョン確認

$ npm -v

10.8.2

🔷Sassのインストール

Sassは使い始めはRubyで使用していた。その後、実務ではSymfonyで自動でコンパイルされる環境が導入され、自分でコンパイルして使用することがなくなっていたため、改めてSassが使える環境を構築する。

現在はnpmを使用するのが最も一般的なようなのでまずはnpm経由でSassをインストールしてみる

グローバルにSassをインストールする

code:Sassインストール

$ npm install -g sass

added 17 packages in 2s

インストールを確認

code:Sassのバージョン確認

$ sass --version

1.78.0 compiled with dart2js 3.5.2

コンパイルして確認

scssファイルを用意

code:test.scss

$ cat test.scss

body {

color: red;

.header {

font-size: 16px;

}

}

コンパイル

sass test.scss test.css

コンパイルされたファイルの確認

code:test.css

$ cat test.css

body {

color: red;

}

body .header {

font-size: 16px;

}

/*# sourceMappingURL=test.css.map */

🔷GulpでSassのコンパイル自動化をしてみる

ただ、今後のことも考えてタスクランナーを使用した方法も知っておいたほうが良さそうではあるので、Gulpを使用したコンパイルの自動化をやってみる。

Gulpの練習用ディレクトリでnpmプロジェクトの初期化を行う

code:練習用ディレクトリgulp-practice/にて

$ npm init -y

Wrote to C:\Users\nagat\Documents\workspace\gulp-practice\package.json:

{

"name": "gulp-practice",

"version": "1.0.0",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC",

"description": ""

}

モジュールのインストール

code:gulpとsass、gulp-sassをインストール

$ npm install -D gulp sass gulp-sass

added 160 packages, and audited 161 packages in 7s

14 packages are looking for funding

found 0 vulnerabilities

環境差異で動作しないなどのトラブル防止のため、Gulpなどはグローバルではなくローカルにインストールするのが一般的らしい。Sassも上記でグローバルにインストールしているが、グローバルにインストールしていてもローカルにインストールすることは可能なので、今回はSassも含めてローカルにインストールを行う

※Gitでバージョン管理をする際、モジュールのインストール後に作成されるフォルダ「node_modules」はリポジトリに含めないように.gitignoreで設定しておく

タスクの作成

code:gulpfile.js

....

// Sassのコンパイルを実行

.pipe(

sass({

outputStyle: "compressed" // コンパイル時のオプションを指定

})

)

....

タスクの実行

code:タスク実行

$ npx gulp

css/以下にコンパイルされたファイル（stayle.css）が作成されていることを確認

watchモードで変更があれば自動でコンパイルするように変更してみる

タスクを実行し、style.scssを変更すると、自動でコンパイルが実行されることを確認

code:タスク実行

$ npx gulp