自動化ツール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を更新し、ファイルを保存しリアルタイムで更新されたら成功
※更新されるタイミングはファイルを保存したタイミングになる
それぞれのファイルの設定情報などについてはまた次回!
divにfloatを効かせた場合の親要素に与える影響について対処法をメモ
親要素divとその小要素divがある関係性の時に、小要素divにfloatを付けると親要素divの高さが0になる(下図)
※下図の場合は行間、margin、paddingの影響で多少の高さがでている状態。
この場合、mainに対して背景色などの設定をした場合にdivの高さがないため、範囲全体に適用されない。
この事象に対する2つの改善方法を記載する
対処法1.clear: both;を新たに作成するコンテントに設定
スタンダードな改善方法。
mainにコンテントを作成しclearfixとしてclear: both;を適用させることでflortをクリア(回り込み解除)する
clear: both;を適用する事でクリアされmainが全体を括るサイズとなる。
まずclear: both;を適用させる要素がないためmainの最後に要素を作る。その要素に対してclear: both;を適用することで改善される。画鋲で下を止めるようなイメージ。下図がイメージとなる。
この図をcssで適用するコードは下記のようになる
<div id="main" class="clearfix">
.clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */
.clearfix:afterは要素の最後に挿入するセレクタとなる。content: ” “;で空文字のコンテントを用意し、display: block;でブロック要素、height: 0;は高さ0で見えないようにしている。visibility: hidden;もコンテンツを見えないようにダブル指定をしているが、この2つの組み合わせは慣例として記載することが望ましい。(ブラウザ対応になっているのかも?)そしてこのコンテンツにclear: both;を適用させる事でflortをクリアしている。
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
についてはIEのブラウザ対応のハックとして入れることが慣例となっている。
対処法2.overflow:hidden;を親divに設定
http://www.fsfield.info/develop/css/004/
メリットは参考サイトに記載してある通り
「overflow:hidden;によるfloat解除のメリットは、cssの指定が長くならない点と、DreamWeaverのデザインビューでもfloatが解除される点です。」
こちらの場合は親要素mainのdivに対して適用する事でfloatを解除することができる。
overflowプロパティでvisible以外を指定することで新しいブロックの書式コンテキストを確立することできる。
<div id="main" class="clearfix">
.clearfix { overflow:hidden; height:100%; }
こちらの対応のほうが対処法1よりもメリットが多いためこちらを採用する事も良いが、親要素divからはみ出した位置に配置したdivなどの表示が切れてしまう場合があるので、そういった場合は対処法1を採用する事が良いと言える。
参考:http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=2958&rand=541d6
本来のoverflowプロパティの仕様から考えるとfloat解除で使用するこの
方法は少しトリッキーに感じる
overflowプロパティ
http://www.htmq.com/style/overflow.shtml
上記以外の対処法
親要素mainのdivにheightをpx指定する事で改善される。パーセント指定の場合は改善されない。
ただ中身のコンテンツの表示が環境により上下するため、決めうちのサイズを指定する事はよくないため、改善方法としては使わない方が良い
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年6月 月 火 水 木 金 土 日 « 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 アーカイブ
- 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月
エントリ