Edited at

Node.js+gulpを利用したSass利用環境の構築


1.はじめに

Node.jsとgulpを使用して、Sassの利用環境をローカルPCに構築した際の手順を備忘録として記述します。

Macを使って構築を行いました。


2.手順

下記手順に沿って進めてください。


2-1.Node.jsのインストール

Node.jsの公式サイトからインストーラをDLします。

※今回は推奨版をインストールします。

img_node.jpg

インストーラを起動します。

img_install_node_001.jpg

「続ける」を押下します。

img_install_node_002.jpg

「続ける」を押下します。

img_install_node_003.jpg

「インストール」を押下します。

img_install_node_004.jpg

インストールが完了したら、「閉じる」を押下します。

img_install_node_005.jpg

ターミナルを起動し、下記コマンドを実行し、Node.jsがインストールされていることを確かめます。

node -v

vX.X.X

Node.jsのバージョンが表示されればインストールは正常に完了しています。


2-2.gulpのインストール

下記コマンドを実行し、gulp-cliをインストールします。

■Windows

npm i -g gulp-cli

■Mac

sudo npm i -g gulp-cli

プロジェクトを作成するフォルダを新規作成します。

ここでは例として、「sass_test」というフォルダを作成します。

[sass_test]

上記ディレクトリに移動します。

cd 〜

package.jsonを作成します。

npm init -y

カレントディレクトリにpackage.jsonが作成されていれば成功です。

[sass_test]

∟package.json

下記コマンドを実行し、gulpをインストールします。

npm i -D gulp

カレントディレクトリにnode_modulesフォルダとpackage-lock.jsonが作成されていれば成功です。

[sass_test]

∟[node_modules]
∟package-lock.json
∟package.json

下記コマンドを実行し、gulp-sassをインストールします。

npm i -D gulp-sass

下記コマンドを実行し、gulpがインストールされていることを確認します。

gulp -v

[23:46:32] CLI version X.X.X

[23:46:32] Local version X.X.X

gulpのバージョンが表示されればインストールは正常に完了しています。

gulpfile.jsを作成します。

コンパイル結果のCSSのインデントルールは、outputStyleから指定が行えます。

アウトプットスタイルは「nested」、「expanded」、「compact」、「compressed」の4種類があります。

実際の出力例は下の方で記載してあります。


gulpfile.js

var gulp = require('gulp');

var sass = require('gulp-sass');

// Sassをコンパイルする処理
gulp.task('sass', function() {
// コンパイル元ディレクトリ
return gulp.src('./sass/**/*.scss')
// アウトプットスタイル
.pipe(sass({outputStyle: 'expanded'}))
// コンパイル先ディレクトリ
.pipe(gulp.dest('./css'));
});


ここまでで、下記のようなディレクトリ構成になっているかと思います。

[sass_test]

∟gulpfile.js
∟[node_modules]
∟package-lock.json
∟package.json


2-3.Sassのコンパイル

先ほど作成したプロジェクトフォルダ内に「sass」フォルダを新規作成し、その中に.scssファイルを新規作成します。


sample.scss

header {

position: fixed;
margin: 0 auto;
padding: 0;
.inner {
padding: 0 4%;
position: relative;
}
.h-logo-box {
display: flex;
height: 56px;
width: 160px;
align-items: center;
h1 {
font-size: 14px;
a {
display: block;
img {
width: 100%;
}
}
}
}
}

下記のようなディレクトリ構成になっているかと思います。

[sass_test]

∟gulpfile.js
∟[node_modules]
∟package-lock.json
∟package.json
∟[sass]
∟sample.scss

下記コマンドを実行し、コンパイルを行います。

gulp sass

プロジェクトフォルダ内にcssフォルダが新規作成されており、その中にsample.cssが作成されていれば成功です。

アウトプットスタイルはgulpfile.jsで指定した下記4種類のいずれかになります。


sample.css(nested)

header {

position: fixed;
margin: 0 auto;
padding: 0; }
header .inner {
padding: 0 4%;
position: relative; }
header .h-logo-box {
display: flex;
height: 56px;
width: 160px;
align-items: center; }
header .h-logo-box h1 {
font-size: 14px; }
header .h-logo-box h1 a {
display: block; }
header .h-logo-box h1 a img {
width: 100%; }


sample.css(expanded)

header {

position: fixed;
margin: 0 auto;
padding: 0;
}

header .inner {
padding: 0 4%;
position: relative;
}

header .h-logo-box {
display: flex;
height: 56px;
width: 160px;
align-items: center;
}

header .h-logo-box h1 {
font-size: 14px;
}

header .h-logo-box h1 a {
display: block;
}

header .h-logo-box h1 a img {
width: 100%;
}



sample.css(compact)

header { position: fixed; margin: 0 auto; padding: 0; }

header .inner { padding: 0 4%; position: relative; }

header .h-logo-box { display: flex; height: 56px; width: 160px; align-items: center; }

header .h-logo-box h1 { font-size: 14px; }

header .h-logo-box h1 a { display: block; }

header .h-logo-box h1 a img { width: 100%; }



sample.css(compressed)

header{position:fixed;margin:0 auto;padding:0}header .inner{padding:0 4%;position:relative}header .h-logo-box{display:flex;height:56px;width:160px;align-items:center}header .h-logo-box h1{font-size:14px}header .h-logo-box h1 a{display:block}header .h-logo-box h1 a img{width:100%}



2-4.Sassの変更を監視する

Sassを更新するたびにコンパイルコマンドを打つのはとても面倒です。

なので、gulpにSassが更新されたら自動的にコンパイルをしてもらうようにします。

gulpfile.jsに以下処理を追加します。


gulpfile.js

// Sassの変更を監視する処理

gulp.task('sass:watch', function() {
// 変更があればSassをコンパイルする処理を実行する
gulp.watch('./sass/**/*.scss', ['sass']);
});

下記コマンドを実行します。

gulp sass:watch

Sassを更新するたびに、CSSに更新内容が反映されていれば成功です。

監視を止める場合はCtrl + Cを押下します。


参考