sacss vol.63 動的なサイトの開発でgulpとbrowsersyncを使ってみる
TRANSCRIPT
SaCSS vol. 63 LT !
動的なサイトの開発で gulpとBrowserSyncを使ってみる
@masashi0923 村上 將志
1
Agenda
2
• 概要
• 構成
• 導入
• タスク定義
• DEMO
概要
3
• SaCSSでGruntやgulpの話が出た時は、静的HTMLのページ制作のタスク自動化が主な話題だったと思います。
• 動的なサイトの開発にも、工夫次第で応用できることがわかってきました。
• 今回は、自分専用の開発サーバ（仮想環境）をたてて、そこで動かしながら確認することを前提とします。
• 作業PCでファイルを編集したら、自動的に開発サーバにアップしてブラウザをリロードする手順を調べてまとめてみました。
余談ですが。。。
4
• こんな疑問、ありますよね？？ • なぜ仮想環境でサーバたてるの？ • MAMPとかXAMPPじゃダメなの？
余談ですが。。。
5
• 昔はXAMPP on Windowsで開発、Linuxサーバへアップしてましたが、色々問題もありました。 • PHPのバージョンが違ってた今ダウンロードできるXAMPPではPHP5.6。CentOS6ではPHP5.3、CentOS7でもPHP5.4。
• ファイルのパーミッション問題考えてなかった • Linux上でPHPのモジュールが足りてなかった
• Windowsで動いてもLinuxで動かない orz • 直す手間かけるくらいなら仮想環境でサーバたてて動かせば、最初の手間はかかるけど後で楽。
• 仮想環境でサーバたてる手順をメモっておけば、本番環境の構築も基本そのままの手順で作れる（はず）。
余談ですが。。。
6
∴基本的にMAMPやXAMPPは使わずに仮想環境でサーバたてて開発してます。 !
※仮想環境の構築は、@ma2ken_zawaさんが詳しいです！
構成
7
構成
8
構成
9
構成
10
構成
11
構成
12
導入
13
• Windowsの場合も、Macの場合も、コマンドを使います。（所謂、黒い画面）
• でも「黒い画面嫌いだから嫌だ」なんて言わないで！
• 多少コマンド間違えても、よほどのことしなければPC環境ぶっ壊すようなことはない（はず）です。
• とりあえずやってみましょう！
導入
14
• インストーラ
• http://nodejs.org/download/
• 環境変数の設定でPath通す？？
• node -v
• npm -v
npmインストールまで（Windows編） ▶すみません、手順覚えてないです。詳しくはググってください orz
導入
15
• インストーラ
• http://nodejs.org/download/
• 環境変数の設定でPath通す？？
• node -v
• npm -v
npmインストールまで（Mac インストーラ編） ▶すみません、やったことないです。詳しくはググってください orz
導入
16
• Comman Line Toolインストール
• xcodeから
• Command Line Tool単体でダウンロード・インストールhttps://developer.apple.com/downloads/index.action
npmインストールまで（Mac nodebrew編） ▶すみません、手順覚えてないです。詳しくはググってください orz
導入
17
• Homebrew
• ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)“
• nodejs
• brew install node
npmインストールまで（Mac nodebrew編） ▶すみません、手順覚えてないです。詳しくはググってください orz
導入
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
• mkdir ○○○○○○○○
• cd ○○○○○○○○
プロジェクトフォルダ作る
導入
20
• グローバル？ローカル？ • グローバル • PC内全体で共有の場所にインストール • 一度入れれば他の案件でも使い回せる • バージョンは固定
• ローカル • プロジェクトのフォルダ配下にインストール • 都度パッケージを入れる必要がある • プロジェクトごとに最新のパッケージを使える
npmパッケージインストール
導入
21
今回はローカルへインストールnpmパッケージインストール
導入
22
• package.json生成
• npm init
• gulpインストール
• npm install -g gulp※gulp本体はグローバルにもインストール？
• npm install ̶save-dev gulp
• gulp -v
npmパッケージインストール
導入
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
• gulp起動 • 最初にSassコンパイル、SFTPアップロード • BrowserSync起動 • ファイルを監視 • *.php • *.scss
• *.php更新時 • sftpアップロード • ブラウザリロード
• *.scss更新時 • sassコンパイル • sftpアップロード • ブラウザリロード
タスクの仕様を決め、gulpfile.js作成
DEMO
25
• タスク定義
• ファイル編集
• ブラウザ操作の同期