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.

gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編

1,177 views

Published on

2015年7月30日に開催します勉強会の事前資料になります。参加人数が多く環境構築から進めることが困難と判断しましたので、本資料を参考に当日ご持参いただきますPCに環境の構築をお願いいたします。

<Mac ユーザーの方へ>

Node.js は、homeberw 経由でのインストールでも良いかと思います。
ご自身の環境に合わせ、ご都合の良い方法で Node.js をインストールしてください。

Published in: Technology
  • Be the first to comment

gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編

  1. 1. 1 gulp + sass で目指せ倍速コーディング 東区フロントエンド勉強会 2015年 第1回 環境準備編
  2. 2. 東区フロントエンド勉強会 2015年 第1回 gulp + sass で目指せ倍速コーディング(環境準備編) 2 1. Ruby(Windows) 1. OS が 32bit / 64bit のどちらで動作しているか確認 2. OS に合った Ruby をダウンロードしてインストール 3. Ruby のインストールが完了しているか確認 4. 文字コードを UTF-8 に変更 5. RubyGems をアップデート 2. Ruby(Mac) 1. Ruby のバージョンを確認 3. Sass 1. Sass のインストール 2. Sass のインストールが完了しているか確認 4. Node.js 1. Node.js のインストール 2. Node.js のインストールが完了しているか確認 5. gulp.js 1. gulp.js のインストール 2. gulp.js のインストールが完了しているか確認 本書では gulp や Sass が動作するための環境準備を説明いたします。
  3. 3. 東区フロントエンド勉強会 2015年 第1回 第1章 Ruby(Windows) 3 1-1. OS が 32bit / 64bit のどちらで動作しているか確認 Windows 7 Windows 8 この章は Windows の方のみが対象となります
  4. 4. 東区フロントエンド勉強会 2015年 第1回 第1章 Ruby(Windows) 4 1-2. OS に合った Ruby をダウンロードしてインストール (1/2) http://rubyinstaller.org/ OSに合わせてダウンロードしてください この章は Windows の方のみが対象となります 公式サイトよりダウンロードし、指示に従いインストールします
  5. 5. 東区フロントエンド勉強会 2015年 第1回 第1章 Ruby(Windows) 5 1-2. OS に合った Ruby をダウンロードしてインストール (2/2) ダウンロードしたファイルをインストールします。 この時、必ず「□ Ruby の実行ファイルへの環境変数パスを設定する」にチェックを入れてください この章は Windows の方のみが対象となります
  6. 6. 東区フロントエンド勉強会 2015年 第1回 第1章 Ruby(Windows) 6 > ruby -v 1-3. Ruby のインストールが完了しているか確認 コマンドプロンプトで以下のコマンドを入力し enter > ruby -v ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32] 以下の様にバージョン情報が表示されればOK この章は Windows の方のみが対象となります
  7. 7. 東区フロントエンド勉強会 2015年 第1回 第1章 Ruby(Windows) 7 > set LANG=ja_JP.UTF-8 1-4. 文字コードを UTF-8 に変更 コマンドプロンプト以下のコマンドを入力し enter この章は Windows の方のみが対象となります
  8. 8. 東区フロントエンド勉強会 2015年 第1回 第1章 Ruby(Windows) 8 > gem update ̶system 1-5. RubyGems をアップデート コマンドプロンプト以下のコマンドを入力し enter ※若干時間がかかる場合があります この章は Windows の方のみが対象となります Ruby のインストールは完了です
  9. 9. 東区フロントエンド勉強会 2015年 第1回 第2章 Ruby(Mac) 9 $ ruby -v 2-1. Ruby のバージョンを確認 ターミナルで以下のコマンドを入力し enter $ ruby -v ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14] 以下の様にバージョン情報が表示されればOK この章は Mac の方のみが対象となります Ruby のバージョン確認は完了です
  10. 10. 東区フロントエンド勉強会 2015年 第1回 第3章 Sass 10 3-2. Sass のインストール > gem install sass コマンドプロンプトで以下のコマンドを入力し enter Windows の方 $ sudo gem install sass ターミナルで以下のコマンドを入力し enter $ sudo gem install sass password: パスワードを要求されるので入力して enter Mac の方
  11. 11. 東区フロントエンド勉強会 2015年 第1回 第3章 Sass 11 3-2. Sass のインストールが完了しているか確認 > sass -v コマンドプロンプトで以下のコマンドを入力し enter > sass -v Sass 3.4.16 (Selective Steve) 以下の様にバージョン情報が表示されればOK Windows の方 $ sass -v ターミナルで以下のコマンドを入力し enter $ sass -v Sass 3.4.16 (Selective Steve) 以下の様にバージョン情報が表示されればOK Mac の方 Sass のインストールは完了です
  12. 12. 東区フロントエンド勉強会 2015年 第1回 第4章 Node.js 12 4-1. Node.js のインストール https://nodejs.org/ 公式サイトよりダウンロードし、指示に従いインストールします
  13. 13. 東区フロントエンド勉強会 2015年 第1回 第4章 Node.js 13 4-2. Node.js のインストールが完了しているか確認 > node -v コマンドプロンプトで以下のコマンドを入力し enter > node -v v0.12.5 以下の様にバージョン情報が表示されればOK Windows の方 $ node -v ターミナルで以下のコマンドを入力し enter $ node -v v0.12.5 以下の様にバージョン情報が表示されればOK Mac の方 Node.js のインストールは完了です
  14. 14. 東区フロントエンド勉強会 2015年 第1回 第5章 gulp.js 14 5-1. gulp.js のインストール > npm install -g gulp コマンドプロンプトで以下のコマンドを入力し enter Windows の方 $ sudo npm install -g gulp ターミナルで以下のコマンドを入力し enter $ password: パスワードを入力して enter Mac の方
  15. 15. 東区フロントエンド勉強会 2015年 第1回 第5章 gulp.js 15 5-2. gulp.js のインストールが完了しているか確認 > gulp -v コマンドプロンプトで以下のコマンドを入力し enter > gulp -v [10:46:52] CLI version 3.9.0 以下の様にバージョン情報が表示されればOK Windows の方 $ gulp -v ターミナルで以下のコマンドを入力し enter $ gulp -v [10:46:52] CLI version 3.9.0 以下の様にバージョン情報が表示されればOK Mac の方 gulp.js のインストールは完了です
  16. 16. 東区フロントエンド勉強会 2015年 第1回 gulp + sass で目指せ倍速コーディング(環境準備編) 16 これで環境準備は完了です

×