Gulp 是一個能夠在開發時提高工作效率的自動化工具，需要 Nodejs 搭配
底下的目的有
1。有 PHP 可用
2。有 web server 可用
所以要安裝 nodejs 與 gulp，其及相關模組
環境版本
Windows 10
node v10.4.0
npm 6.1.0
gulp [10:57:38] CLI version 2.0.1
[10:57:38] Local version 3.9.1
開始
(我用 Git Bash console 去操作的)
安裝 nodejs https://nodejs.org/en/
wget https://nodejs.org/dist/v10.4.0/node-v10.4.0-x64.msi
就照它預設的下一步下一步就好 (預設裝到 C:\Program Files\nodejs 底下)
裝完後可以確認一下是否成功
npm -h
安裝 gulp 指令
npm install gulp-cli -g # -g 等於 --global，如果沒下的話會安裝在當下目錄，-g 好處是執行時只要下 gulp 就可以
建立一個專案目錄
mkdir gulptest cd gulptest
初始化產生 package.json 檔，安裝了什麼套件都會在這裡面呈現
npm init --yes # --yes 全都照預設
安裝 gulp 到現在這個專案目錄裡面 (有 node_modules 目錄存放套件)
npm install gulp -D # -D 等於 --save-dev
建立 gulpfile.js 檔案 (所有設定參數在這裡面)
// 載入 gulp
var gulp = require('gulp');
// gulp.task(任務名稱, Fn)
gulp.task('hello',function() {
console.log('Hello World');
});
// 上面是把 task 與 function 放在一起
// 或者，把它分開寫
var gulp = require('gulp');
gulp.task('hello', helloTask);
function helloTask(done) {
console.log('Hello World');
done();
}
執行 gulp hello
如果後面沒帶 hello ，它預設是跑 default 名稱
結果，看到 Hello World 輸出就代表 gulp 成功運作了
$ gulp hello [22:54:56] Using gulpfile D:\gulptest\gulpfile.js [22:54:56] Starting 'hello'... Hello World [22:54:56] Finished 'hello' after 235 μs
安裝 PHP 與 gulp 相關套件
npm install gulp-connect-php -D
下載 PHP for Windows https://windows.php.net/download/
wget https://windows.php.net/downloads/releases/php-5.6.36-nts-Win32-VC11-x64.zip
編輯 gulpfile.js
var gulp = require('gulp');
var connectPHP = require('gulp-connect-php'); // 結合 PHP
// 定義相關環境變數
var php_bin = './php-5.6.36-nts-Win32-VC11-x64/php.exe';
var php_ini = './php-5.6.36-nts-Win32-VC11-x64/php.ini'; // 手動產生
var web_host = '0.0.0.0';
var web_port = '8080';
var web_home = './www';
gulp.task('connect-php', function() {
connectPHP.server({
hostname: web_host,
bin: php_bin,
ini: php_ini,
port: web_port,
base: web_home
});
});
gulp.task("default",['connect-php']); // 這邊把它定義在 default 後面，
// 就代表當我執行了 gulp 預設會去讀 defult 接著就把後面的任務接續執行下去
// 當然也是可以直接 gulp connect-php
執行 gulp
成功會在前景執行著，就可以瀏覽 http://localhost:8080，記著寫個 index.php
$ gulp [11:23:25] Using gulpfile D:\gulptest\gulpfile.js [11:23:25] Starting 'connect'... [11:23:25] Finished 'connect' after 8.36 ms [11:23:25] Starting 'default'... [11:23:25] Finished 'default' after 24 μs
升級 Nodejs
下載 node-XXX-x64.msi 重裝 npm install npm@next -g
升級 Gulp
npm install gulp-cli -g
npm install gulp --save-dev
升級 PHP
下載 php-XXX-nts-Win32-VC11-x64.zip 解開放到對的位置
備份
只要下列幾個就好，其它都可以再執行安裝
package.json # 所有用到的相關套件 gulpfile.js # 所有設定內容 XXX/php.ini # 如果需要的話 (改過內容) www # 如果需要的話
缺點寫在最後面
用 gulp 搭配 PHP 可能並不適合所有已寫好的程式，也會因程式結構讓網頁無法正常執行，因此需要透過煩雜的除錯過程才可能成功 work，或許你在 gulp 上開發的很開心，但到了正式環境能不能跑又是另一回事，所以對於純 HTML/CSS/JS 是比較 match 的工具。
留言