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 的工具。

最後修改日期: 2018 年 06 月 09 日

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。