Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

説明資料

1,034 views

Published on

  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

説明資料

  1. 1. Gruntを使用してWEB制作 を便利にしよう (導入/基礎編)
  2. 2. 01_Web制作を便利にする Grunt
  3. 3. そもそもGruntってなに?
  4. 4. • Web制作で面倒な作業を自動化するツール
  5. 5. Gruntでできること
  6. 6. SCSSファイルのビルド JavaScriptファイルのバリデーション JavaScriptファイルの軽量化(圧縮、minify) CoffeeScriptファイルのコンパイル Lessファイルのコンパイル CSSファイルの圧縮 CSSファイルのバリデーションGitとの連携 画像の最適化 CSSスプライトの作成
  7. 7. ・・・ありすぎてわからないし 難しそう(́・ω・`;)
  8. 8. でも
  9. 9. 実は単純な作業であれば そんなに難しくはない。
  10. 10. 02_Gruntのインストール
  11. 11. Gruntを使うには下準備が必要です。 • sass/compassを使うのであればRubyのインストール • sass/compassのインストール • node.jsのインストール • Grunt本体のインストール 以上4つを行う必要があります。
  12. 12. Rubyインストール方法
  13. 13. 1.現行の最新インストーラーをダウンロードしインストール http://rubyinstaller.org/downloads/
  14. 14. 2.Ruby実行ファイルへの環境変数PATHを設定する。にチェックそのままインストール 個別に設定しなければいけない場合もあるので詳しくはgoogleで検索!
  15. 15. コマンドプロンプトを開き【ruby -v】と打つと現在のrubyのVersionがわかる。何も 出ない場合はきちんとインストールされていない。
  16. 16. sass・compassの インストール
  17. 17. Rubyインストールすると標準的についてくるパッケージ管理ツールRubyGemsにて sass・compassのインストール。コマンドプロンプトを使用し以下を入力していく。 とりあえずはRubyGems自体をアップデート
  18. 18. アップデートされたらsass、compassのインストール コマンドプロンプトに以下入力 gem install sass gem install compass sass、compassのインストールを行う。
  19. 19. きちんとインストールできているかを確認 きちんと上記のように表示されていたら 問題なくインストールされている。
  20. 20. node.jsのインストール
  21. 21. node.jsのインストール http://nodejs.org/ ↑上記サイトからinstallボタンを押すとインストーラーが  ダウンロードされるのでインストール
  22. 22. ローカルに保存して実行すると インストール完了。
  23. 23. ただちょっと待って下 さい。
  24. 24. node.jsはバージョンアップが早いためバージョン管理ツールなどの 導入も検討をしたほうがよいかも。(nodistなど)
  25. 25. Gruntのインストール
  26. 26. ■npm(Node Package Manager)のインストール コマンドプロンプトから ! > npm install -g grunt-cli ! 上記コマンドを入力するとnpm(Node Package Manager)にてGrunt のCLIをインストール出来る。 (オプションとして -gを付けておくと、どこからでも実行可能になる。)
  27. 27. ■パッケージ設定ファイルの制作 任意のディレクトリを作成。 今回はgrunt_sampleというディレクトリの作成 ! (僕の場合は今回はDドライブ直下に作成)
  28. 28. コマンドプロンプトから、cdコマンドを使って 作成したディレクトリに移動。
  29. 29. 【現在いるディレクトリ】> cd 【移動したいディレクトリ】 ! 一階層上に戻る場合は【cd ../】 ※cd 【tabキー】 を押せば候補が出る。 コマンドプロンプトの見かた
  30. 30. 任意ディレクトリに移動したら、パッケージのインストール。 コマンドプロンプトで下記コマンドを打ち込む > npm init
  31. 31. package.jsonの制作を行うコマンド。パッケージの設定が出来る。 色々設定出来ますが、とりあえず最初はエンター10回位押して そのまま作ってOK。
  32. 32. いよいよGruntのインストールです。1行です。 ! npm install grunt --save-dev ! 簡単w
  33. 33. --save-devをつけると、package.jsonに インストールした情報が記述が追加される。 ! npm install grunt は、gruntをインストールしろ、という指示です。
  34. 34. 長いログが流れ、終了するとgrunt_sampleディレクトリは 次のようになるはず。 grunt_sample これでGruntのインストールは完了です!
  35. 35. 03_Gruntの基本的な使い方
  36. 36. プラグインのインストール 方法
  37. 37. Gruntをインストールしたけど、このままでは使えません。 必要なプラグインを導入していきましょう。
  38. 38. ■プラグインのインストール 上記を記載することによりプラグインをインストールし、package.json に追記させる。 このようにすることでGruntで使用したいプラグインをどんどん追加し ていく。 npm install gruntを行ったディレクトリ上で npm install 【プラグイン名】 --save-dev
  39. 39. --- Memo --- package.jsonを使用することにより、package.jsonをコピペするだけ でその他のディレクトリでも簡単に同じパッケージを共有する事が出来る。 ! > npm install ! →既存のpackage.json から使用するプラグインのインストールを行う
  40. 40. タスクの設定
  41. 41. Gruntはプラグインをインストールしただけでは使用できません。 Gruntfile.jsというファイルを用意してタスクを書き込んでいきましょう
  42. 42. タスクの書き方は相対パスで基本的に記載していきます。 次のページから簡単なタスクの登録方法 Gruntfile.jsと名前を付けて保存。
  43. 43. 04_簡単なプラグインの説明
  44. 44. ここからはCaptchaわけで説明 サンプルをGitHubにアップしているので 興味のある方は落としてみてください。 ! ! ※サンプルはすでにpackage.jsonを含めているので、 コマンドプロンプトで保存したディレクトリに行き、 ! npm install ! を実行すればOK
  45. 45. Captcha01【copy】
  46. 46. Captcha01【copy】 概要(どういう事ができるのか?) あるディレクトリにあるファイル(またはフォルダ)をそのまま別の場所 にコピーを作成することが出来る。 コピー
  47. 47. Captcha01【copy】 使い方  grunt-contrib-copyというプラグインを使います。  grunt-contrib-copyのインストール方法  ※【02_Gruntのインストール】 が終わっている状態で。  > npm install grunt-contrib-copy --save-dev
  48. 48. Captcha01【copy】 Gruntfileの説明・書き方 プラグインのGitHubページに詳しい使い方が載ってます。
  49. 49. 実行!
  50. 50. Captcha02【clean】
  51. 51. Captcha02【clean】 概要(どういう事ができるのか?) ディレクトリ・ファイルの削除ができる。 _dev img 画像1 画像2 _dev img
  52. 52. Captcha02【clean】 使い方  grunt-contrib-cleanというプラグインを使います。  grunt-contrib-cleanのインストール方法  ※【02_Gruntのインストール】 が終わっている状態で。  > npm install grunt-contrib-clean --save-dev
  53. 53. Captcha02【clean】 Gruntfileの説明・書き方 プラグインのGitHubページに詳しい使い方が載ってます。
  54. 54. 実行!
  55. 55. Captcha03【cssmin】
  56. 56. Captcha03【cssmin】 概要(どういう事ができるのか?) 複数のcssの結合・圧縮などができる
  57. 57. Captcha03【cssmin】 使い方  grunt-contrib-cssminというプラグインを使います。  grunt-contrib-cssminのインストール方法  ※【02_Gruntのインストール】 が終わっている状態で。  > npm install grunt-contrib-cssmin --save-dev
  58. 58. Captcha03【cssmin】 Gruntfileの説明・書き方 プラグインのGitHubページに詳しい使い方が載ってます。
  59. 59. 実行!
  60. 60. Captcha04【csscomb】
  61. 61. Captcha04【csscomb】 概要(どういう事ができるのか?) CSSプロパティのソート・並び替え 修正前 修正後
  62. 62. 使い方  grunt-csscombというプラグインを使います。  grunt-csscombのインストール方法  ※【02_Gruntのインストール】 が終わっている状態で。  > npm install grunt-csscomb --save-dev Captcha04【csscomb】
  63. 63. Gruntfileの説明・書き方 sort.jsonにてソート順を読み込んでいる。 Captcha04【csscomb】
  64. 64. sort.json Captcha04【csscomb】
  65. 65. 実行!
  66. 66. Captcha05【compass】
  67. 67. Captcha05【compass】 概要(どういう事ができるのか?) compassに対応し、Sassのコンパイルができる。
  68. 68. 使い方  grunt-contrib-compassとというプラグインを使います。  grunt-contrib-compassとのインストール方法  ※【02_Gruntのインストール】 が終わっている状態で。  > npm install grunt-contrib-compass --save-dev Captcha05【compass】
  69. 69. Gruntfileの説明・書き方 基本的な設定は、compassで生成される config.rbファイル内での設定をします。 Gruntfileではオプションでconfig.rbのパスを設定すればOK Captcha05【compass】
  70. 70. config.rb config.rbはsassが入っているディレクトリと cssに書き出しを行いたいディレクトリを指定すれば最低限使える。 Captcha05【compass】
  71. 71. 実行!
  72. 72. Captcha06 【SampleTask】応用編
  73. 73. ここまでは、単発での作業を行なってきました。
  74. 74. でも、普通であれば単発での作業はあまり無く・・・。 同時に複数の作業を行わなければなりません。
  75. 75. そこで 【grunt-contrib-watch】
  76. 76. 【grunt-contrib-watch】とは 指定したファイルを監視し、 更新があった場合は指定したタスク を実行する。
  77. 77. 使い方  grunt-contrib-watchとというプラグインを使います。  grunt-contrib-watchとのインストール方法  ※【02_Gruntのインストール】 が終わっている状態で。  > npm install grunt-contrib-watch --save-dev grunt-contrib-watch
  78. 78. Gruntfileの説明・書き方 例として。compassとwatchを使ったGruntfileの書き方。 Gruntfileの書き方はいろいろあるので自分の設定しやすいものに変えてOKです。 grunt-contrib-watch
  79. 79. grunt-contrib-watchの実行 grunt-contrib-watch grunt-contrib-watchを実行すると、監視モードに入ります。 上のような画面が出ている時に、対象ファイルが更新されると指定した タスクを実行します。 ! ! 監視モードを終わりたい場合はctrl + Cキーを押し バッチ ジョブを終了しますか(Y/N)と出るので Yキーを入力し Enter。
  80. 80. Captcha6に 今までのすべてのタスクを使っ たサンプルファイルあります

×