Recommandé
Contenu connexe
Tendances
Tendances (12)
Similaire à web開発環境
Similaire à web開発環境 (20)
Plus de MarlboroLand
Dernier
Dernier (10)
web開発環境
- 2. 最近の制作環境 作業する前に言葉の説明 SourceTreeのインストール Node.jsのインストール gulpの設定 Sassの設定 ローカルホストサーバーの立ち上げ 2 アジェンダ
- 3. 最近の制作環境 3
- 4. 4 今まで
- 6. 6 環境の変化
- 12. 12 作業効率化 作業速度向上
- 13. 作業する前に 言葉の説明 13
- 14. 14 コマンドプロンプト1
- 17. 17 黒い画面
- 19. 19 環境変数2
- 24. 24 有名なエディター3つ
- 25. 25 Sublime Text 3 Atom Adobe Brackets 軽い エンジニア向け 重い デザイナー向け
- 26. 26 http://www.sublimetext.com/3 Windows、Windows 64 bitのいずれかを 選ぶ ZIPファイルを解凍してインストール 1 2 3 Sublime Text 3のインストール
- 27. 27 [View]メニューから[Show Console]を選択 https://packagecontrol.io/installation SUBLIME TEXT 3のテキストをコピペ [Preferences]メニューに[Package Control] があるかどうか確認 1 2 3 Package Controlのインストール 追加機能を 入れるための機能
- 31. 31 こんな感じ
- 32. 32 Emmet：コードの記述を超効率化できる All Autocomplete：自動補完機能をさらに拡張 jQuery：コードjQueryを補完 HTML5：コードHTML5を補完 SublimeCodeIntel：色々な言語のの強調表示、コー ドの自動補完 Sublime Text 3のプラグイン Shift+Ctrl+PでPackage Controlが表示できます
- 36. 36 { "draw_minimap_border": true, //ミニマップの表示位置にボーダーを付ける “font_face”: “Ricty Diminished”, //表示する書体 “font_size”: 18, //フォントのサイズ "line_padding_top": 4, //行間 "tab_size": 2, //タブサイズ "draw_white_space": "all", //タブやスペースなど不過視文字を表示 “highlight_line”: true, //選択行をハイライトする “trim_trailing_white_space_on_save”: true, //空白を削除 “word_wrap”: true, //自動改行を行う “translate_tabs_to_spaces”: true, //タブをスペースに変換する “default_encoding”: “UTF-8”, //デフォルトの文字コードを指定 "show_encoding": true //文字コードを右下に表示 } ルールの例
- 40. 40 Gitが有名
- 43. 43 今回はこれを使います
- 49. 49 SSHとSSHキー
- 54. 54 「Save public key」ボタンをクリック してSSH公開鍵を任意の場所に分かり やすい名称で保存 続いて「Save private key」ボタンをク リックしてSSH秘密鍵を上と同じ様に に保存 3 SSHキーの作り方 4
- 57. 57 ホスティングサービスにリポジトリ作成 リポジトリをSourceTreeへクローン 5 SourceTreeの使い方 6 あとは保存場所にファイルを作ったり いじったり好きなことしていいです
- 64. npmって？ 64
- 68. gulpの設定 68
- 69. 作業効率化の一つとして 69
- 71. その機能がビルドツール 71
- 73. 73 あらかじめ実際に作業する場所 （プロジェクト）を新規で作成 コマンドプロンプトから npm install -g gulp と入力（npmのコマンド）して グローバルインストール 1 gulpのインストール 2
- 75. 75 npm install -D gulpと入力して ローカルインストール （node_modulesディレクトリができます） gulp –vと入力して クライアントのバージョン ローカルのバージョンが表示されればOK! 5 gulpのインストール 6
- 77. Gulpを使ってみる 77
- 81. 81 var 変数名 = require(‘使いたい機能'); ファイルの読み込み gulp.task(‘タスク名', function() { 行いたい処理 }); タスクの登録 今回必要な命令等
- 82. var gulp = require('gulp'); gulp.task('hoge', function() { console.log('HelloWorld!'); }); 82 gulpfile.jsに記述
- 84. Sassの設定 84
- 86. そこで生まれたのがSass 86
- 92. 92 npm install -D gulp-sassと入力 package.jsonに追記されます 1 Sassのインストール libsassというC/C++で作られた SaSSのコンパイラが gulp-sassというパッケージで gulpに提供されています
- 93. 93 作業用ディレクトリを新規作成 生成用ディレクトリを新規作成 作業用にscssファイルを作成 gulpにタスクを登録 コマンドプロンプトからgulpを実行 1 Sassの使い方 2 3 4 5
- 101. var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function(){ gulp.src('./src/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./html/common/css')); }); 101 gulpfile.jsに記述
- 105. これも自動化したい 105
- 111. 111 npm install -D browser-syncと入力1 BrowserSyncのインストール インストールの途中でエラーが出るが終了場合、 Windowsではnode-gyp周りで問題があるようです。 回避方法としては、別途PythonとVisual C++を 入れる必要があります。 今回は、この部分を使わないのでそのままでも 上手くいきますが、今後の事を考えると 対処した方がいいです。
- 112. 112 gulpにタスクを登録 コマンドプロンプトからgulpを実行 監視指定（SCSSなど）ファイルを修正 ブラウザが更新されていることを確認 1 BrowserSyncの使い方 2 3 4
- 114. var gulp = require('gulp'); var sass = require('gulp-sass'); var browserSync = require('browser-sync'); gulp.task('sass', function(){ gulp.src('./src/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./html/common/css')); }); gulp.task('default', ['sass', 'browser-sync'], function () { gulp.watch("./src/scss/*.scss", ['sass']); }); gulp.task('browser-sync', function() { browserSync.init({ server: { baseDir: "./html" } }); gulp.watch("./html/**", function() { browserSync.reload(); }); }); 114 gulpfile.jsに記述