動的なサイト開発で楽をするために gulpとBrowserSyncを導入したので、 その手順などについてまとめました。 ※2015年3月7日(土)のSaCSS vol.63のLTで発表

1. SaCSS vol. 63 LT
!
動的なサイトの開発で
gulpとBrowserSyncを使ってみる
@masashi0923
村上 將志
1

2. Agenda
2
• 概要
• 構成
• 導入
• タスク定義
• DEMO

3. 概要
3
• SaCSSでGruntやgulpの話が出た時は、静的
HTMLのページ制作のタスク自動化が主な話題
だったと思います。
• 動的なサイトの開発にも、工夫次第で応用できる
ことがわかってきました。
• 今回は、自分専用の開発サーバ（仮想環境）をた
てて、そこで動かしながら確認することを前提と
します。
• 作業PCでファイルを編集したら、自動的に開発
サーバにアップしてブラウザをリロードする手順
を調べてまとめてみました。

4. 余談ですが。。。
4
• こんな疑問、ありますよね？？
• なぜ仮想環境でサーバたてるの？
• MAMPとかXAMPPじゃダメなの？

5. 余談ですが。。。
5
• 昔はXAMPP on Windowsで開発、Linuxサーバへアップ
してましたが、色々問題もありました。
• PHPのバージョンが違ってた
今ダウンロードできるXAMPPではPHP5.6。
CentOS6ではPHP5.3、CentOS7でもPHP5.4。
• ファイルのパーミッション問題考えてなかった
• Linux上でPHPのモジュールが足りてなかった
• Windowsで動いてもLinuxで動かない orz
• 直す手間かけるくらいなら仮想環境でサーバたてて動かせ
ば、最初の手間はかかるけど後で楽。
• 仮想環境でサーバたてる手順をメモっておけば、本番環境
の構築も基本そのままの手順で作れる（はず）。

6. 余談ですが。。。
6
基本的にMAMPやXAMPPは使わずに仮想環境で
サーバたてて開発してます。
!
※仮想環境の構築は、@ma2ken_zawaさんが詳し
いです！

7. 構成
7

8. 構成
8

9. 構成
9

10. 構成
10

11. 構成
11

12. 構成
12

13. 導入
13
• Windowsの場合も、Macの場合も、コマンドを使いま
す。（所謂、黒い画面）
• でも「黒い画面嫌いだから嫌だ」なんて言わないで！
• 多少コマンド間違えても、よほどのことしなければPC環
境ぶっ壊すようなことはない（はず）です。
• とりあえずやってみましょう！

14. 導入
14
• インストーラ
• http://nodejs.org/download/
• 環境変数の設定でPath通す？？
• node -v
• npm -v
npmインストールまで（Windows編）
▶すみません、手順覚えてないです。詳しくはググってください orz

15. 導入
15
• インストーラ
• http://nodejs.org/download/
• 環境変数の設定でPath通す？？
• node -v
• npm -v
npmインストールまで（Mac インストーラ編）
▶すみません、やったことないです。詳しくはググってください orz

16. 導入
16
• Comman Line Toolインストール
• xcodeから
• Command Line Tool単体でダウンロード・インストー
ル
https://developer.apple.com/downloads/
index.action
npmインストールまで（Mac nodebrew編）
▶すみません、手順覚えてないです。詳しくはググってください orz

17. 導入
17
• Homebrew
• ruby -e "$(curl -fsSL https://
raw.githubusercontent.com/Homebrew/install/
master/install)
• nodejs
• brew install node
npmインストールまで（Mac nodebrew編）
▶すみません、手順覚えてないです。詳しくはググってください orz

18. 導入
18
• nodebrew
• brew install nodebrew
• nodebrew install v0.10
• nodebrew use v0.10
• echo export PATH=$HOME/.nodebrew/current/bin:$PATH
>> /.bash_profile
• node -v
• npm -v
npmインストールまで（Mac nodebrew編）
▶すみません、手順覚えてないです。詳しくはググってください orz

19. 導入
19
• mkdir ○○○○○○○○
• cd ○○○○○○○○
プロジェクトフォルダ作る

20. 導入
20
• グローバル？ローカル？
• グローバル
• PC内全体で共有の場所にインストール
• 一度入れれば他の案件でも使い回せる
• バージョンは固定
• ローカル
• プロジェクトのフォルダ配下にインストール
• 都度パッケージを入れる必要がある
• プロジェクトごとに最新のパッケージを使える
npmパッケージインストール

21. 導入
21
今回はローカルへインストール
npmパッケージインストール

22. 導入
22
• package.json生成
• npm init
• gulpインストール
• npm install -g gulp
※gulp本体はグローバルにもインストール？
• npm install ̶save-dev gulp
• gulp -v
npmパッケージインストール

23. 導入
23
• Sassコンパイル : gulp-sass
• npm install ̶save-dev gulp-sass
• サーバへアップロード : gulp-sftp
• npm install ̶save-dev gulp-sftp
• ブラウザの同期、リロード : browser-sync
• npm install ̶save-dev browser-sync
npmパッケージインストール

24. タスク定義
24
• gulp起動
• 最初にSassコンパイル、SFTPアップロード
• BrowserSync起動
• ファイルを監視
• *.php
• *.scss
• *.php更新時
• sftpアップロード
• ブラウザリロード
• *.scss更新時
• sassコンパイル
• sftpアップロード
• ブラウザリロード
タスクの仕様を決め、gulpfile.js作成

25. DEMO
25
• タスク定義
• ファイル編集
• ブラウザ操作の同期