gulpはターミナル上で動作するjavascriptライブラリーです。
ターミナルでjavascriptを動作させるためには node.js をインストールしておく必要があります。
node.jsの公式サイトによると 2018/08 現在での推奨版である
8.11.3LTSで導入してみることにします
構築される環境
|
1 2 3 4 5 6 7 |
MyMac:~ hagiwara$ node -v v8.11.3 MyMac:~ hagiwara$ brew -v Homebrew 1.6.9 Homebrew/homebrew-core (git revision 2c6ae6; last commit 2018-06-20) MyMac:~ hagiwara$ gulp -v [07:41:03] CLI version 2.0.1 |
homebrewのインストール
x-codeがインストールされていない場合「App Store」でインストールをします。
またはhomebrewのインストール時に自動的にインストール（アップデート）が走ります。
最近のx-codeは 「iOS」の進化が早く且つ大きくなっています。多少時間がかかります。
homebrew 公式サイトを参考にしてインストールスクリプトをコピーしてターミナルで実行
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 公式ページよりコピーして実行 MyMac:~ hagiwara$ /usr/bin/ruby -e \ "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ==> This script will install: ・ 途中省略 ・ ・ ==> Installation successful! ==> Homebrew has enabled anonymous aggregate user behaviour analytics. Read the analytics documentation (and how to opt-out) here: https://docs.brew.sh/Analytics.html ==> Next steps: - Run `brew help` to get started - Further documentation: https://docs.brew.sh // バージョン確認 MyMac:~ hagiwara$ brew -v Homebrew 1.2.3 |
nodebrewのインストール
Mac OS Xには、「 curl 」という「 HTTPやFTPでのダウンロードやアップロードする 」ための様々な機能を持ったコマンドが標準装備されています
|
1 2 3 4 5 6 7 8 9 |
MyMac:~ hagiwara$ curl -L git.io/nodebrew | perl - setup % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0 0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0 0 0 0 0 0 0 0 0 --:--:-- 0:00:03 --:--:-- 0 100 24569 100 24569 0 0 6340 0 0:00:03 0:00:03 --:--:-- 2212k Fetching nodebrew... Installed nodebrew in $HOME/.nodebrew |
nodebrewの確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
MyMac:~ hagiwara$ nodebrew -v nodebrew 1.0.0 Usage: nodebrew help Show this message nodebrew install <version> Download and install <version> (from binary) nodebrew compile <version> Download and install <version> (from source) nodebrew install-binary <version> Alias of `install` (For backword compatibility) nodebrew uninstall <version> Uninstall <version> nodebrew use <version> Use <version> nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote versions nodebrew ls-all List remote and installed versions nodebrew alias <key> <value> Set alias nodebrew unalias <key> Remove alias nodebrew clean <version> | all Remove source file nodebrew selfupdate Update nodebrew nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version nodebrew exec <version> -- <command> Execute <command> using specified <version> Example: # install nodebrew install v8.9.4 # use a specific version number nodebrew use v8.9.4 |
node.jsのインストール
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
MyMac:~ hagiwara$ nodebrew install-binary 8.11.3 Fetching: https://nodejs.org/dist/v6.11.5/node-v6.11.5-darwin-x64.tar.gz ######################################################################## 100.0% Installed successfully MyMac:~ hagiwara$ nodebrew install v8.11.3 Fetching: https://nodejs.org/dist/v8.11.3/node-v8.11.3-darwin-x64.tar.gz ######################################################################## 100.0% Installed successfully MyMac:~ hagiwara$ nodebrew list v8.11.3 current: none MyMac:~ hagiwara$ nodebrew use v8.11.3 use v8.11.3 MyMac:~ hagiwara$ node -v v8.11.3 MyMac:~ hagiwara$ npm -v 5.6.0 // 参考 インストールコマンド MyMac:~ hagiwara$ nodebrew install v0.11.14 // 特定バージョン指定 MyMac:~ hagiwara$ nodebrew install latest // 最新 MyMac:~ hagiwara$ nodebrew install stable // 安定版最新 // 参考 インストールされている node.js の一覧 表示 MyMac:~ hagiwara$ nodebrew list v6.11.5 v7.10.0 v8.11.3 v10.0.0 v10.8.0 current: v8.11.3 // 参考 node.js のバージョンを選択する MyMac:~ hagiwara$ nodebrew use v8.11.3 use v8.11.3 |
gulpでsass環境を実現するための準備
|
1 2 3 4 5 6 7 8 9 |
//作業ディレクトリ作成例 MyMac:~ hagiwara$ tree . ├── index.html ├── src │ └── sass │ └── style.scss └── css // cssフォルダー以下に sassでコーディングしたのコンパイル結果を出力させる。 |
gulpのインストール
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
// グローバルインストールで、PC全体で共通で使えるようにする MyMac:~ hagiwara$ npm install --global gulp-cli /Users/hagiwara/.nodebrew/node/v8.11.3/bin/gulp -> /Users/hagiwara/.nodebrew/node/v8.11.3/lib/node_modules/gulp-cli/bin/gulp.js + gulp-cli@2.0.1 added 235 packages in 5.327s // 作業フォルダー内での作業 // 設定を保存する package.json を作成 MyMac:~ hagiwara$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. // とりあえず今回は全てリターンでデフォルトで作成 // 必要に合わせて 内容を入力すればその内容が反映される。 package name: (sass2) version: (1.0.0) description: entry point: (gulpfile.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/hagiwara/xxxx/sass2/package.json: { "name": "sass2", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes) // ローカルに gulp をインストール MyMac:~ hagiwara$ npm install --save-dev gulp // --save-dev のオプションは生成した pakage.json に設定を保存する。 // sass を build するパッケージ MyMac:~ hagiwara$ npm install --save-dev gulp-sass</pre> |
sassを管理するgulpfile.js
実行するタスクを定義するファイルとして 「gulpfile.js」 を定義します。
この例では, sassを定義している style.scss ファイルを 特定のフォルダーへコンパイルするタスク「sass」
また、 フォルダー 内のファイル「src/*.scss」の変更を感知すると タスク「sass」 を実行する タスク「watch」を定義しています。
ターミナル上で $gulp を実行すると デフォルトと指定してあるタスク「default」を実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var gulp = require('gulp'); var sass = require('gulp-sass'); // sass を build するパッケージ gulp.task('sass', function(){ gulp.src('./src/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(gulp.dest('./css')); }); gulp.task('watch', function(){ gulp.watch('./src/*.scss', ['sass']); }) gulp.task('default',['watch']); |
動作確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
// 構築されたファイル構造を確認する。 MyMac:~ hagiwara$ tree . ├── css │ └── style.css // gulpのタスク「sass」により自動的に生成される ├── gulpfile.js ├── index.html ├── node_modules // このフォルダー内にライブラリーがインストールされる。 // 実行ファイル gulpfile.js でインクルードして利用する。 ・ 省略 ・ ・ ├── package-lock.json // npm5 から新たに追加されたようです。 ├── package.json └── src └── style.scss //サンプル index.html <!DOCTYPE html> <html lang="ja"> <link rel="stylesheet" href="css/style.css"> <head> <meta charset="utf-8"> <title>SASS環境の構築</title> </head> <body> <div id="container"> <h1>Gulpの動作テスト</h1> <p>scss形式で記述したファイルをcssファイルに変換</p> </div> ・ ・ ・ </body> </html> // style.scss を編集する。 container { background-color: #eee; h1 { background-color: black; color: white; } p { color: black; } } // gulpfile.js に watch が設定されているので scssファイルを編集すると自動的に // style.css にコンパイル結果が出力される。 container { background-color: #eee; } container h1 { background-color: black; color: white; } container p { color: black; } |