<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>sublime text 彙整 - Harry&#039;s iBlog</title>
	<atom:link href="https://iblog.ph-wbc.com/tag/sublime-text/feed/" rel="self" type="application/rss+xml" />
	<link>https://iblog.ph-wbc.com</link>
	<description>文章、教學分享，iPhone 相關</description>
	<lastBuildDate>Wed, 05 Apr 2017 04:51:54 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.8.3</generator>
	<item>
		<title>Sublime Text 3 LiveReload</title>
		<link>https://iblog.ph-wbc.com/sublime-text-3-livereload/</link>
					<comments>https://iblog.ph-wbc.com/sublime-text-3-livereload/#respond</comments>
		
		<dc:creator><![CDATA[哈利]]></dc:creator>
		<pubDate>Sun, 21 Aug 2016 07:00:00 +0000</pubDate>
				<category><![CDATA[Windows 教學]]></category>
		<category><![CDATA[實作心得]]></category>
		<category><![CDATA[教學文章]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[rwd]]></category>
		<category><![CDATA[sublime text]]></category>
		<category><![CDATA[web design]]></category>
		<guid isPermaLink="false">http://iblog.ph-wbc.com/?p=921</guid>

					<description><![CDATA[<p>Sublime Text 3 LiveReload，在電腦內架設開發網頁程式的好工具!! 藉由編寫程式存檔後，網頁自行更新畫面，免人工自動重新整理，軟體自行更新!! 非常的方便，非常的實用，非常適合網頁開發工程師 !!!</p>
<p>這篇文章 <a rel="nofollow" href="https://iblog.ph-wbc.com/sublime-text-3-livereload/">Sublime Text 3 LiveReload</a> 最早出現於 <a rel="nofollow" href="https://iblog.ph-wbc.com">Harry&#039;s iBlog</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" class="alignnone" style="display: inline;" title="Sublime Text 3 LiveReload" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/Sublime_Text_Logo.png?resize=256%2C256&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="256" height="256" data-recalc-dims="1" /></p>
<h2>Sublime Text 3 LiveReload</h2>
<p>&nbsp;</p>
<p>之前有介紹過 <a href="http://iblog.ph-wbc.com/post/746" target="_blank">Windows LiveReload 開發環境</a></p>
<p>當時是使用 Sublime Text 2 建置環境，但是還是有很多錯誤</p>
<p>最近因為在嘗試把 Theme 加上 RWD 功能，所以需要存檔馬上更新頁面的功能</p>
<p>先前都是用 Sublime Text 3 加 SFTP 存檔上傳的方法做…</p>
<p>但是存檔完之後還是要手動更新頁面，無法做到即時性的更新</p>
<p>所以最近開始萌生念頭，也找了許多資料…最後測試成功了 !!</p>
<p>所需軟體如下:<br />
1.Sublime Text 3 (軟體名稱)<br />
2.Sublime Text 3 – LiveReload (軟體外掛)<br />
3.AMPPS (伺服器環境架設)<br />
4.Chrome – LiveReload (瀏覽器附加元件)</p>
<p>準備好以上就可以開始實作了!!</p>
<p><span id="more-921"></span></p>
<p>1. AMPPS 啟動，保持 Start 狀態 !! 也要確定 php 可以運行</p>
<p><img loading="lazy" class="alignnone" style="display: inline;" title="Sublime Text 3 LiveReload" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/AMPPS.jpg?resize=470%2C380&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="470" height="380" data-recalc-dims="1" /></p>
<p>2.Chrome 安裝 LiveReload 附加元件</p>
<p><img loading="lazy" class="alignnone" style="display: inline;" title="Sublime Text 3 LiveReload" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/chrome-1.jpg?resize=750%2C108&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="750" height="108" data-recalc-dims="1" /></p>
<p>3.Sublime Text 3 安裝 LiveReload 外掛</p>
<p><img loading="lazy" class="alignnone" style="display: inline;" title="Sublime Text 3 LiveReload" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/sublimetext3.jpg?resize=393%2C394&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="393" height="394" data-recalc-dims="1" /></p>
<p>4.在 Sublime Text 3 –&gt; Preferences –&gt; Package Settings –&gt; LiveReload –&gt; Settings – Default</p>
<p>輸入以下字串</p>
<p>[code lang=&#8221;php&#8221;]{<br />
&quot;enabled_plugins&quot;: [<br />
&quot;SimpleReloadPlugin&quot;,<br />
&quot;SimpleRefresh&quot;<br />
]<br />
} [/code]</p>
<p><img loading="lazy" class="alignnone" style="display: inline;" title="Sublime Text 3 LiveReload" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/sublimetext-livereload.jpg?resize=385%2C157&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="385" height="157" data-recalc-dims="1" /></p>
<p>當今天打開 Chrome 時如下圖所示</p>
<p>圖左空心表示關閉狀態，存檔不會自動更新。</p>
<p>圖右實心表示啟用狀態，存檔時會自動更新。</p>
<p><img loading="lazy" class="alignnone" style="margin: 0px; display: inline;" title="chrome-off" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/chrome-off.jpg?resize=243%2C107&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="243" height="107" data-recalc-dims="1" /><img loading="lazy" class="alignnone" style="display: inline;" title="Sublime Text 3 LiveReload" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/chrome-on.jpg?resize=238%2C124&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="238" height="124" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>實作畫面</p>
<p><img loading="lazy" class="alignnone" style="display: inline;" title="Sublime Text 3 LiveReload" src="https://i0.wp.com/img.ph-wbc.com/77d61801c6fd_DA59/livereload_thumb.gif?resize=800%2C390&#038;ssl=1" alt="Sublime Text 3 LiveReload" width="800" height="390" data-recalc-dims="1" /></p>
<p>這篇文章 <a rel="nofollow" href="https://iblog.ph-wbc.com/sublime-text-3-livereload/">Sublime Text 3 LiveReload</a> 最早出現於 <a rel="nofollow" href="https://iblog.ph-wbc.com">Harry&#039;s iBlog</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://iblog.ph-wbc.com/sublime-text-3-livereload/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
