Web・デザイン

Sass 開発環境 gulp.js の導入 Mac版

gulpはターミナル上で動作するjavascriptライブラリーです。
ターミナルでjavascriptを動作させるためには node.js をインストールしておく必要があります。
node.jsの公式サイトによると 2018/08 現在での推奨版である 
8.11.3LTSで導入してみることにします

  1. 構築される環境
  2. homebrewのインストール
  3. nodebrewのインストール
  4. node.jsのインストール
  5. gulpでsass環境を実現するための準備
  6. gulpのインストール
  7. sassを管理するgulpfile.js
  8. 動作確認

構築される環境

メニューに戻る

homebrewのインストール

x-codeがインストールされていない場合「App Store」でインストールをします。
またはhomebrewのインストール時に自動的にインストール(アップデート)が走ります。
最近のx-codeは 「iOS」の進化が早く且つ大きくなっています。多少時間がかかります。
homebrew 公式サイトを参考にしてインストールスクリプトをコピーしてターミナルで実行

メニューに戻る

nodebrewのインストール

Mac OS Xには、「 curl 」という「 HTTPやFTPでのダウンロードやアップロードする 」ための様々な機能を持ったコマンドが標準装備されています

メニューに戻る

nodebrewの確認

メニューに戻る

node.jsのインストール

メニューに戻る

gulpでsass環境を実現するための準備

メニューに戻る

gulpのインストール

sassを管理するgulpfile.js

実行するタスクを定義するファイルとして 「gulpfile.js」 を定義します。
この例では, sassを定義している style.scss ファイルを 特定のフォルダーへコンパイルするタスク「sass」
また、 フォルダー 内のファイル「src/*.scss」の変更を感知すると タスク「sass」 を実行する タスク「watch」を定義しています。
ターミナル上で $gulp を実行すると デフォルトと指定してあるタスク「default」を実行します。

メニューに戻る

動作確認

メニューに戻る

参考サイト:
homebrew 公式サイト
node.js 公式サイト
gulp.jp 公式サイト

最近の記事

  1. EC-CUBE 4.0 インストール
  1. Web・デザイン

    列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Aj…
  2. プログラミング

    [python] Django ローカル環境にインストール サンプルアプリケーシ…
  3. プログラミング

    郵便番号データベース MySQL ビュー View
  4. サーバー環境

    Laravel インストールメモ
  5. Web・デザイン

    CSS3 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ
PAGE TOP