- Gulp導入に必要なNode.jsとnodebrewについてはこちら
nodebrewでNode.jsをインストール（初心者向け）
Gulp.jsのインストール
1.まずは、Webサイトのファイル一式が保存されるフォルダーを作成します
任意の場所にフォルダーを作成してください。
ここでは「testproject」をDocuments（Macの「書類」ディレクトリ）に作成します。
2.ターミナルを開いてフォルダー（testproject）の場所へ移動します
ターミナルにcdと打ってから、フォルダーをターミナルにドラッグ&ドロップしてreturnキーを押すとドロップしたフォルダーが現在地になるよ！
3.package.jsonを作成します
ターミナルで以下を実行して下さい。
npm init -y
- package.jsonとは
プロジェクトの名前やバージョン、どのパッケージ（gulpとかgulp-sassとか）を使っているか管理しているファイルです。 エディタで開いてみると、以下のように記載されていることがわかります。
{
"name": "testproject",
"version": "1.0.0",
"description": "",
...
4.gulpとgulp-sassをローカルインストール
まずはgulpからインストールします。
npm install --save-dev gulp
続いてgulp-sassをローカルインストールします。
npm install --save-dev gulp-sass
package.jsonには以下のようにgulpとgulp-sassのバージョンが記載されます。
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^4.0.2"
}
これでgulpとgulp-sassのローカルインストールは完了です。
5.gulpfile.jsの作成
gulpfile.jsとは、gulpの詳細な処理内容について設定するためのファイルです。
基本的には、gulp-sassのnpmページに記載されているコードを流用でいけますが、以下のコードはそちらを元にgulp-sass:watchをgulp4.0対応のコードに編集しています。
自分で編集しないといけないところはコメントを記載しているので、環境によって変えてね。
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss') // コンパイル元となるsassファイルのパスを入れる
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) // outputStyle（どのような記述形式でコンパイルするか）の指定
.pipe(gulp.dest('./css')); // コンパイルで生成されるcssファイルの出力先となるパスを入れる
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', gulp.series('sass')); // コンパイル元となるsassファイルのパスを入れる
});
outputStyleは以下から選択すべし。
- nested
一般的なcss記法＋セレクタの階層の深さに応じてインデント。個人的にはあまり使ったことがない。
body {
color: #333; }
body h1 {
background: #fff; }
- expanded
一般的なcss記法。Sassを使っていないクライアントにはexpanded形式でコンパイルされたcssを納品しています。
body {
color: #333;
}
body h1 {
background: #fff;
}
- compact
一般的なcss記法＋改行無し。個人的にはあまり使ったことがない。
body { color: #333; }
body background { color: #fff; }
- compressed
minifyにより軽量化＋難読化。個人的に一番馴染みがある形式。サイト高速化にも繋がるのでこれが好き。
body{color:#333}body background{color:#fff}
6.gulpの実行〜sassのコンパイル
gulpをローカルインストールしているので、パスを通すために以下コマンドを.zshrcに追記します。
これをしないと「gulp: command not found」とターミナルに怒られてしまいgulpが動かない！！
.zshrcについて詳しくはこちらを見てね。
nodebrewでNode.jsをインストール（初心者向け）
export PATH=$PATH:./node_modules/.bin
gulpを実行してsassをコンパイルするには、cdでプロジェクトのあるディレクトリに移動して、以下コマンドを打ちます！
gulp sass
sassファイルの変更を自動で検知（監視）して都度コンパイルするには、以下コマンドを打ちます！！
gulp sass:watch
7.完了
パスを通すところでつまづきまくり〜…環境構築は難しいですね。
8.豆知識
- 処理を止めたい時はctrl + cやで〜！
- gulp-sassにアップデートが無いか、時々確認するやで。以下コマンドで確認してね。
npm outdated
更新があったならば以下コマンドでアップデートするやで。
npm update