駆け出しエンジニアのブログ

モバイルエンジニア 荒川直樹 github.com/naoki1026

『gulp』をインストールしてからSassを使うまでの手順

概要
- 業務でgulpを使ってCSSファイルを作成することになり、現場では上司に準備していただいたものの、理解を深めるために個人用PCにもインストールすることにしました。
- 簡単に準備できるものだと思っていたのですが、苦戦したので、自分の備忘録もかねてブログにまとめることにしました。

Homebrewのインストール

Homebrew公式サイトに掲載されているスクリプトをターミナルに貼り付けて、実行するだけだったので、とても簡単でした。

Homebrew公式サイト
Xcodeとcommand line toolをインストールしていない場合は、インストールすることを求められるので、インストールしてください。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew -vをターミナルに入力して実行し、Homebrewのバージョンが表示されたら、正しくインストールされたことになる。

$ brew -v

nodebrewのインストール

以下のコマンドをターミナルに入力して実行することで、nodebrewがインストールできる。

$ brew install nodebrew
$ curl -L git.io/nodebrew | perl - setup
$ vi ~/.bash_profile
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ echo $PATH
$ source ~/.bash_profile ★ターミナル起動時に行う

Node.jsのインストール

以下のコマンドをターミナルに入力して実行することで、nodebrewがインストールできる。

$ nodebrew install v6.11.5
$ nodebrew list
$ nodebrew use v6.11.5

以下のコマンドをターミナルに入力して、Node.js、npmが正しくインストールされていることを確認する。

$ node -v
$ npm -v

gulpのインストール

gulpをインストールする前に作業を行うためのディレクトリを作成する。

f:id:naoki1026:20190707170411p:plain

以下の内容を記述したgulpfile.jsを作成して、cssの直下に保存する。

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");
 
// style.scssの監視タスクを作成する
gulp.task("default", function() {
  // ★ style.scssファイルを監視
  return gulp.watch("./_src/sass/**/*.scss", function() {
    // style.scssの更新があった場合の処理
 
    // style.scssファイルを取得
    return (
      gulp
        .src("./_src/sass/**/*.scss")
        // Sassのコンパイルを実行
        .pipe(
          sass({
            outputStyle: "expanded"
          })
            // Sassのコンパイルエラーを表示
            // (これがないと自動的に止まってしまう)
            .on("error", sass.logError)
        )
        // cssフォルダー以下に保存
        .pipe(gulp.dest("css"))
    );
  });
});

以下のコマンドをターミナルに入力して実行することで、gulpをインストールすることができる。

$ npm init
$ sudo npm install --save-dev gulp@4.0.0
※サンプルではgulpの3.91バージョンをインストール。
バージョンによってgulpfile.jsの記述方法が異なるので注意が必要。
$ sudo npm install gulp-sass --save-dev
--以下はパソコンを起動させるたびに入力が必要。理由を理解できていない・・・。
$ npm bin -g
$ export PATH=$PATH:`npm bin -g`

-- gulp sassをインストールできなかった場合は、以下を実行
$ npm config set user 0
$ npm config set unsafe-perm true
$ sudo npm install gulp-sass --save-dev