自動化ツールGruntの開発環境構築をメモ
Webデザイナの間で流行っている(便利な)Gruntについて。
Gruntは主にWebデザイナの普段の作業を自動化するツールになる。
ブラウザのオートリロードやSass/Lessのコンパイル、minファイル(css,javascriptの縮小)作成の自動化、ファイルの結合、バージョン管理システムとの連携などの作業を自動化してくれる。
今回はオートリロードが動作するところまで確認する。
ブラウザのオートリロードを実現するためにはGruntのサーバとブラウザにクライアントツールを設置する必要がある。
オートリロードはファイル更新時のブラウザの更新Windowsの場合は「F5」MACの場合は「Ctrl + R」が自動化される。そのため作業の手間を1つ減らす事ができる。
node.jsとnpmのインストール
node.jsは非同期処理を実現するためのjavascriptライブラリ(リアルタイム処理が可能)でGruntを動かすためにはこれが必要となる。
npmはnode.jsのパッケージ管理ツールでnode.jsのプラグインをインストールしたりする場合に使用する。
公式サイトより「Install」ボタンを押下してファイルダウンロードしそのまま実行する。
基本的に変更しないで全て「次へ」でインストール完了
動作確認:
windowsの場合:
コマンドプロンプト(すべてのプログラム > アクセサリ)を立ち上げて下記コマンドを実行し、バージョン番号が表示されれば成功
macの場合:
ターミナルを立ち上げて下記コマンドを実行し、バージョン番号が表示されれば成功
node.jsのインストール確認
node -v
npmのインストール確認
npm -v
grunt-cliをインストール
gruntの実体をnpmパッケージ管理ツールでインストールする
npm install -g grunt-cli
※ -g オプションを入れることでグローバル領域にインストールされる
サンプルプロジェクトのダウンロード
オートリロードのサンプルをとりあえず動作させる。
まずはサンプルを下記よりダウンロード
https://github.com/y-matsumoto/grunt-sample
ディレクトリ構成について:
css
- base.css ※サンプルCSSのため好きなファイルへ変更して良い
- style.css ※サンプルCSSのため好きなファイルへ変更して良い
index.html ※サンプルHTMLのため好きなファイルへ変更して良い
Gruntfile.js ※Gruntの設定ファイル(パッケージ追加などはここで行う)
package.json ※npmの設定ファイル(基本的に一度作成したら手動では弄らない)
サンプルプロジェクトへGruntインストール
1.コマンドプロンプトでサンプルディレクトリへ移動する
※cdコマンド 参考:http://cmd-pro.com/com_00.html
2.インストールコマンドの実行
npm install
Gruntサーバの立ち上げ
Gruntサーバの立ち上げ
grunt
Running “watch” task
Waiting…
状態であれば成功
※基本的にこの状態でサーバが立ち上がっている状態のため常に起動しておくこと
Gruntクライアントツールのインストール
GoogleChromeやFireFoxヘクライアントツールのLiveReloadプラグインを導入する
下記参考サイトを参考に導入すると良い。
参考サイト:http://blog.sou-lab.com/livereload/
クライアントツールの起動
index.htmlファイルをプラグインをインストールしたブラウザで開き、LiveReloadのスイッチを入れる
※参考サイトを参考にすること
オートリロード動作確認
index.html、各cssを更新し、ファイルを保存しリアルタイムで更新されたら成功
※更新されるタイミングはファイルを保存したタイミングになる
それぞれのファイルの設定情報などについてはまた次回!
coffee-break
Don't write code that useless.
1日5杯はコーヒー、カフェオレ飲みます。狭心症のため安静にします☆松本 雄貴
Kotlinでサービスリリース目指す!
iOSでチャットアプリ作成中。自然言語解析LSIを習得中
Mac / Android・iOS / Rails / Oracle
2017年 Lpic L2取得
2012年 Android技術者資格取得
2010年 OracleMasterGold10g取得
2008年 CCNAQiitaもたまに投稿
https://qiita.com/y-matsumoto東京近郊で常駐開発探してる方はこちらよりご連絡ください
SES企業でパートナー会社を探している企業様はこちらよりご連絡ください
スプリットカメラ iOS / Android
音声認識で聞いた日付から曜日当てアプリ Android
ソーシャルタイマー Android
カテゴリー
- ActiveRecord (2)
- Android (52)
- AndroidStudio (10)
- Ansible (1)
- AWS (1)
- Bash (18)
- Blog (7)
- BootStrap (1)
- CentOS (16)
- Chef (1)
- css (2)
- Eclipse (5)
- error (1)
- Facebook (2)
- Firebase (1)
- FuelPHP (16)
- Git (22)
- GitHub (3)
- Gradle (2)
- GraphAPI (1)
- Grunt (1)
- heroku (2)
- illustrator (1)
- iOS (17)
- Java (4)
- Jenkins (1)
- jQuery (3)
- Kotlin (2)
- Mac (22)
- nginx (1)
- Node.js (3)
- peco (1)
- php (5)
- Python (1)
- Rails (16)
- Ruby (11)
- shell (1)
- SNS (1)
- Swift (2)
- tmux (2)
- Vagrant (6)
- Vim (6)
- windows (2)
- WordPress (3)
- zsh (4)
- フリーランス (1)
- ライブラリ (1)
- 勉強会 (2)
- 宣伝 (1)
- 未分類 (2)
最近の投稿
- [MAC]HighSierraでgitプッシュエラー「Unable to negotiate with xxx.xxx.xxx.xxx port xx: no matching cipher found. Their offer: aes128-cbc,3des-cbc,blowfish-cbc,cast128-cbc,arcfour,aes192-cbc,aes256-cbc,rijndael-cbc@lysator.liu.se fatal: Could not read from remote repository.」
- [iOS]iOS11からFacebook,Twitter連携(シェアなど)廃止の対応方法
- [iOS]速報2017AppleSpecialEventのiOS11、iPhone8など発表内容について
- [iOS][Firebase]The default Firebase app has not yet been configured. Add `[FIRApp configure];
- [iOS]2017年9月リリースのiOS11で開発者が対応するべきこと
- 今人気の現金化サービスCASH(キャッシュ)を使ったレビュー
- [Pandoc][Mac]pandocでmarkdownからwordファイル作成
- [Android]映画サマーウォーズの聞いた日付(誕生日)から曜日当てをアプリ音声認識で簡単に実現
- [Android]起動しているActivityを取得するadb shell コマンド
- [Android][Kotlin]kotlin学習で参考になるサイト一覧
2023年10月 月 火 水 木 金 土 日 « 5月 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 アーカイブ
- 2018年5月
- 2017年9月
- 2017年8月
- 2017年7月
- 2017年6月
- 2017年5月
- 2017年2月
- 2017年1月
- 2016年12月
- 2016年7月
- 2016年6月
- 2016年1月
- 2015年12月
- 2015年11月
- 2015年10月
- 2015年9月
- 2015年8月
- 2015年7月
- 2015年6月
- 2015年5月
- 2015年4月
- 2015年3月
- 2015年2月
- 2015年1月
- 2014年12月
- 2014年11月
- 2014年6月
- 2014年5月
- 2014年4月
- 2014年3月
- 2014年2月
- 2014年1月
- 2013年12月
- 2013年11月
- 2013年9月
- 2013年8月
- 2013年7月
- 2013年6月
- 2013年5月
- 2013年4月
- 2013年3月
- 2013年2月
- 2013年1月
- 2012年12月
- 2012年10月
- 2012年5月
- 2010年6月
エントリ