『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をインストールする前に作業を行うためのディレクトリを作成する。
以下の内容を記述した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
用語
CSS
Cascading Style Sheetの略で、HTML や XML の要素をどのように装飾するのかを指示する。