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

19770 ワード
JavaScript gulp CSS Node.js Sass CSS テキストリンク

1.はじめに

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

2.手順

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

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

Node.jsの公式サイトからインストーラをDLします。
※今回は推奨版をインストールします。

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

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

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

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

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

ターミナルを起動し、下記コマンドを実行し、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を押下します。

参考