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. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. Web・デザイン

    Illustrator ショートカットデータベース、カテゴリー別絞り込み 、マウ…
  2. プログラミング

    Wordressの投稿を「FullCalendar」でカレンダー表示してみる
  3. サーバー環境

    centos7 + Apache2.4 + Mysql5.7 + Php7.0 …
  4. サーバー環境

    MAMPのインストール
  5. プログラミング

    天気予報RSSをsimplexml_load_fileでパースする。
PAGE TOP