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種類があります。
実際の出力例は下の方で記載してあります。
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ファイルを新規作成します。
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種類のいずれかになります。
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%; }
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%;
}
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%; }
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に以下処理を追加します。
// Sassの変更を監視する処理
gulp.task('sass:watch', function() {
// 変更があればSassをコンパイルする処理を実行する
gulp.watch('./sass/**/*.scss', ['sass']);
});
下記コマンドを実行します。
gulp sass:watch
Sassを更新するたびに、CSSに更新内容が反映されていれば成功です。
監視を止める場合はCtrl + Cを押下します。