Skip to content

Instantly share code, notes, and snippets.

@japboy

japboy/grunt-study-group-01-agenda.md

Last active December 16, 2015 23:59
Show Gist options
  • Save japboy/5517425 to your computer and use it in GitHub Desktop.
Save japboy/5517425 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grunt-study-group-01-agenda.md

Grunt 勉強会 #01 覚書

目次

  1. 基本的な CLI 環境の構築
    1. dotfiles の解説
    2. dotfiles のインストール
  2. Python と pip の使い方
    1. Python について
    2. Python のインストール先確認
    3. Python のバージョン確認
    4. pip について
    5. pip による PyPI インストール先確認
    6. pip によるインストールとアンインストール方法
  3. Ruby と gem の使い方
    1. Ruby について
    2. Ruby のインストール先確認
    3. Ruby のバージョン確認
    4. gem について
    5. gem による RubyGems インストール先確認
    6. gem によるインストールとアンインストール方法
  4. Node.js と npm の使い方
    1. Node.js について
    2. Node.js のインストール先確認
    3. Node.js のバージョン確認
    4. package.json について
    5. npm について
    6. npm による NPM インストール先確認
    7. npm によるインストールとアンインストール方法
    8. nodebrew による Node.js バージョンの切り替え
  5. Grunt のインストール
    1. grunt-cli と grunt-init のインストール
    2. コマンドの解説
    3. grunt-init によるスケルトンタスクのインストール
    4. grunt-cli によるタスク実行
  6. Windows 環境でインストールするべきモノ

基本的な CLI 環境の構築

dotfiles の解説

  • . から始まるファイルやディレクトリを ドットファイル と呼ぶ。
  • UNIX 系 OS (Mac OS X や Linux) ではドットファイルは 隠しファイル (非表示ファイル) として扱われる。
  • また上記 OS ではホームディレクトリ (~/) 直下のドットファイルに各種 ソフトウェアの設定を保存する慣習 がある。
  • 環境再構築時にすぐにいつもの環境にリストアできるようドットファイルをまとめたものを dotfiles と呼ぶ。
  • 最近ではこの dotfiles を GitHub で公開して共有する流れがある。

dotfiles のインストール

今回使用する dotfiles の GitHub リポジトリページ:

https://github.com/sonicjam/dotfiles

インストールコマンド:

bash <(curl -L https://raw.github.com/sonicjam/dotfiles/master/bootstrap.sh)
  • Homebrew/Git/Python/Ruby/Node.js をホームディレクトリにインストールします。
  • 上記ソフウェアを既にインストールして設定している場合は衝突してエラーの原因になる可能性があるので、アンインストールした状態が好ましいです。

Python と pip の使い方

Python について

  • 軽量プログラミング言語の一つ。
  • シンタックスハイライト用ライブラリ Pygments や、CLI 自動化ツール Fabric 等で Python 自体で開発しない場合でもインストールする必要性がでてくる。
  • 社内 wiki は Python 製。

Python のインストール先確認

インストール先を確認するコマンド:

which python

Python のバージョン確認

バージョンを確認するコマンド:

python -V

pip について

  • Python 製のライブラリやモジュールをインストール/アンインストールするパッケージマネージャー。
  • これらのライブラリやモジュールは PyPI - the Python Package Index という web サイト上で管理されている。
  • よって Python のライブラリやモジュールは PyPI と呼ばれる。
  • これら PyPI のインストール/アンインストールをするのが pip コマンド。

インストール先の確認:

which pip

pip による PyPI インストール先確認

dotfiles を使用して Python をインストールした場合は下記パスに PyPI の実ファイル群が格納される:

~/.homebrew/share/python

インストールされている PyPI 一覧を確認するコマンド:

pip list

pip によるインストールとアンインストール方法

Pygments を例に pip を使用してインストール:

pip search pygments  # Pygments という PyPI が一覧にあるのがわかる
pip install Pygments  # 登録名通りに指定してインストール

アンインストールする場合:

pip uninstall Pygments

Ruby と gem の使い方

Ruby について

  • 軽量プログラミング言語の一つ。
  • CSS プリプロセッサ Sass (SCSS) やその補助ライブラリ Compass 等 Ruby に依存するライブラリやツールは日常的に使うので開発で使用しなくてもインストール必要性がある。

Ruby のインストール先確認

インストール先を確認するコマンド:

which ruby

Ruby のバージョン確認

バージョンを確認するコマンド:

ruby -v

gem について

  • Ruby 製のライブラリやモジュールをインストール/アンインストールするパッケージマネージャー。
  • これらのライブラリやモジュールは RubyGems という web サイト上で管理されている。
  • よって Ruby のライブラリやモジュールは RubyGems と呼ばれる。
  • これら RubyGems のインストール/アンインストールをするのが gem コマンド。

インストール先の確認:

which gem

gem による RubyGems インストール先確認

dotfiles を使用して Ruby をインストールした場合は下記パスに RubyGems の実ファイル群が格納される:

~/.homebrew/opt/ruby/bin

インストールされている RubyGems 一覧を確認するコマンド:

gem list --local

gem によるインストールとアンインストール方法

Sass を例に gem を使用してインストール:

gem search sass  # sass という RubyGems が一覧にあるのがわかる
gem install sass  # 登録名通りに指定してインストール

アンインストールする場合:

gem uninstall sass

Node.js と npm の使い方

Node.js について

  • 軽量プログラミング言語の一つである JavaScript でバックエンド開発を可能にするプラットフォーム。
  • Ruby に続く web 開発で勢いのあるプラットフォームで、Node.js で動く様々なライブラリやツールや登場している。
  • 今回の勉強会の趣旨である Grunt も Node.js 上で動くツール。

Node.js のインストール先確認

インストール先を確認するコマンド:

which node

Node.js のバージョン確認

バージョンを確認するコマンド:

node -v

package.json について

  • Node.js 上で動くプログラムやライブラリの依存関係等を記述する設定用 JSON ファイル。
  • Node.js の仕様の元となっている CommonJS で定義されている。
  • Node.js 用のプログラムやライブラリで一般に配布されているもののルートディレクトリには必ず存在する。
  • 後述の npm でも使用する。

npm について

  • Node.js 製のライブラリやモジュールをインストール/アンインストールするパッケージマネージャー。
  • これらのライブラリやモジュールは NPM (Node Packaged Modules) という web サイト上で管理されている。
  • よって Node.js のライブラリやモジュールは NPM と呼ばれる。
  • これら NPM のインストール/アンインストールをするのが npm コマンド。

インストール先の確認:

which npm

npm による NPM インストール先確認

dotfiles を使用して Node.js をインストールした場合は下記パスに NPM の実ファイル群が格納される:

~/.nodebrew/current/lib/node_modules

インストールされている NPM 一覧を確認するコマンド:

npm ls -g

npm によるインストールとアンインストール方法

CoffeeScript を例に npm を使用してインストール:

npm search coffee-script  # coffee-script という NPM が一覧にあるのがわかる
npm install -g coffee-script  # 登録名通りに指定してインストール

アンインストールする場合:

npm uninstall -g coffee-script

npm における -g オプションの扱い

  • npm はデフォルトで NPM をカレントディレクトリ下の node_modules ディレクトリにインストールする。
  • -g オプションを付ける事でグローバル環境に対して npm コマンドを実行するようになる。
  • CoffeeScript や Grunt などのプロジェクトに関係なく横断して使用する Node.js ツールは -g オプションを付けてインストールし、それ以外はプロジェクト単位でインストールすると良い。

nodebrew による Node.js バージョンの切り替え

  • dotfiles から Node.js をインストールした場合は nodebrew 経由でのインストールとなるので、バージョン切り替えが可能。
  • NPM もバージョンごとにインストールされる。

現在のバージョンと切り替え可能なバージョン一覧を確認:

nodebrew ls

導入可能な全バージョンの Node.js を表示:

nodebrew ls-remote

指定バージョンをインストールして切り替え:

nodebrew install-binary v0.8.23
nodebrew use v0.8.23

指定バージョンの NPM を別バージョンに移行:

nodebrew use v0.10.5
nodebrew migrate-package v0.8.23

Grunt のインストール

grunt-cli と grunt-init のインストール

Grunt コマンドと Grunt テンプレート機能を使用可能にする grunt-cli と grunt-init をインストール:

npm install -g grunt-cli grunt-init

Grunt v0.3.x が既にインストール済の場合は事前に削除:

npm uninstall -g grunt

コマンドの解説

grunt コマンド

  • Grunt を使用するための主要コマンド。
  • Gruntfile.js か Gruntfile.coffee が存在するディレクトリ内で実行すると、そのファイルが読み込まれ実行される。

単純に Gruntfile が存在するディレクトリで実行すれば default タスクが実行される:

grunt

grunt-init コマンド

  • Grunt 用に作成したプロジェクトテンプレートを読み込むコマンド。
  • テンプレートファイルは ~/.grunt-init ディレクトリ内にテンプレートごとにディレクトリを切って保存する。

~/.grunt-init/sonicjam というテンプレートからプロジェクトを作成する場合:

cd /path/to/proj
grunt-init sonicjam
npm install

grunt-init によるスケルトンタスクのインストール

git clone git://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
cd /path/to/proj
grunt-init gruntfile
npm install

grunt-cli によるタスク実行

Windows 環境でインストールするべきモノ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment