我已經將我的前端工作流程轉移到Gulp上，並且在開發靜態網站時有一段噁心的時間。我目前使用BrowserSync，它會啓動服務器並在每次檢測到更改時重新加載我的頁面 - 這太棒了。使用BrowserSync和Gulp與WordPress（MAMP）

我想知道在使用MAMP時是否有辦法用WordPress來做到這一點？ MAMP PRO顯然使用自己的服務器，有沒有一種方法可以告訴我的gulpfile.js在本地運行WordPress網站時使用BrowserSync？

希望是有道理的。任何幫助表示讚賞。提前致謝！

來源

2014-10-01 realph

我不得不在某些地方解決這個問題。

這項工作的結果可以在這裏找到：https://github.com/MozaikAgency/wp-theme-bootstrap隨意瀏覽，使用和貢獻:)

注：下面沒有具體提到，如果你有節點，並一飲而盡安裝，因爲甲基苯丙胺你係統，它將工作，而不管網站本身在哪裏被託管/運行。運行WordPress的服務器和瀏覽器同步將啓動的服務器是分開的，不相關的。作爲參考，我們使用這個旁邊XAMP在工作中發展我們的WP主題

具體來說，我們希望有一個開發環境，與所有的花裏胡哨（這肯定包括瀏覽器同步），但已經建立了主題這是乾淨的發展cruft（瀏覽器同步片段，gulpfile.js等）。

這個想法是，你只會寫在開發主題，比如說wp-contents/themes/example-theme_dev，並且gulp會處理它需要做的一切，生成構建的主題，例如wp-content/themes/example-theme。

注意：這不是教程，只是瀏覽器同步與WordPress設置一起工作時應該發生的一些事情的概述。您可以查看the repo本身，以查看我們將所有內容綁定在一起的完整方式。

瀏覽器同步實施

因爲我們反正在從「開發主題爲」到「建主題爲」移動文件，我們得到一個機會，其移交之前轉換這些文件。

在開發模式（默認gulp任務）時，轉換將具體inject the following snippet into the bottom of your theme's functions.php

/** 
* DEVELOPMENT MODE ONLY 
* 
* Browser-sync script loader 
* to enable script/style injection 
* 
*/ 
add_action('wp_head', function() { ?> 
    <script type="text/javascript" id="__bs_script__">//<![CDATA[ 
     document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname)); 
    //]]></script> 
<?php }, 999);

這一行動將打印出來的腳本到你的主題的擡頭鏈接到瀏覽器同步服務器將處理的一個所有頁面刷新/注入您的構建過程拋出它。

，該腳本指向當您運行the following gulp task來引導實際的服務器（也稱爲具有默認gulp任務）：

var browserSync = require('browser-sync'); 

/** 
* Spin up the browser-sync 
* socket server to listen for 
* and push code changes to the 
* browser 
* 
*/ 
module.exports = function (done) { 
    browserSync({ 
    logSnippet: false, 
    server: false, 
    open: false, 
    reloadDelay: 100, 
    reloadDebounce: 100 
    }); 

    done(); 
};

所以，你有你的瀏覽器同步服務器和運行，你的主題現在可以使用腳本片段自動更新，現在剩下的就是告訴瀏覽器同步它應該更新什麼，什麼時候更新。

爲此，我發現最好的方法是明確告訴瀏覽器同步在任何轉換吞噬任務（如sass到css處理）完成後立即更新。主要是你只需要以下添加到您的一口任務結束：

.on('end', browserSync.reload);

其中browserSync很簡單：

var browserSync = require('browser-sync');

結束語

這個答案涵蓋了你需要的基本知識讓瀏覽器同步到您的WP工作流程中。你可以查看the wp-theme-bootstrap repo，我們把所有這些放在一起，看看它是如何工作的整個畫面，如果你有興趣，你可以自己試試。

我們現在已經在公司使用了一段時間了。希望你覺得它有用，如果你有任何建議可以隨意加入。

來源

2015-05-12 20:45:39

使用BrowserSync和Gulp與WordPress（MAMP）

回答

瀏覽器同步實施

結束語

相關問題