初學HTML/CSS/Javascript的學習者除了上codepen這一類的線上學習網站之外,如果要在自己的電腦中練習.html、.css以及.js程式時,經常需要在編輯完成某個程式片段時重新整理瀏覽器檢視其結果,儘管只是一個小小的重新整理的動作,但是如果這個動作可以在我們對於網頁檔或是程式檔一存檔之後立即自動更新網頁,相信在學習的過程中會更加地有效率,而可以幫助我們做這件事的程式就是gulp。

由於gulp是Javascript寫成的,而它是透過npm來做套件管理,因此要使用gulp,第一要務是在你的電腦中安裝npm,而安裝npm只要前往Node.js網站安裝好Node.js就有了。安裝完畢之後,可以在命令提示字元的地方使用node –version檢查看看版本,有跑出版本就表示正確安裝,當然也可以使用npm –version檢查npm的版本。

有了npm之後,先使用以下的指令安裝gulp的主程式:

npm install gulp-cli -g

這個動作只要做一次就可以了。

接著在你要練習網頁程式的目錄之下,輸入以下命令:

npm install gulp -D
npm install browser-sync

這個動作是在每一次重新建立一個開發網頁用的目錄時,也就是一個專案要使用一次。此命令會協助我們在此專案目錄之下建立一些執行gulp所需要的Javascript檔案,它們都會被放在node_modules這個資料夾之下。
接下來,為了要順利執行自動監視的動作,需要在專案目錄之下編寫一個gulpfile.js檔案。假設我們的專案包含了兩個子目錄分別是css和js,同時在專案根目錄之下以index.html當做是主目錄,之後只要是css或是js之下的所有.css和.js檔案有任何的更新,以及在專案根目錄之下的所有*.html的檔案有所更新的話都希望gulp可以幫我們把網頁重新整理一次,那麼gulpfile.js的檔案內容應該編寫如下:

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();

gulp.task('js', function() {
    return gulp.src('js/*.js');
});

gulp.task('css', function() {
    return gulp.src('css/*.css');
});

gulp.task('html', function() {
    return gulp.src('*.html');
});

gulp.task('js-watch', ['js'], function(done) {
    browserSync.reload();
    done();
});
gulp.task('html-watch', ['html'], function(done) {
    browserSync.reload();
    done();
});
gulp.task('css-watch', ['css'], function(done) {
    browserSync.reload();
    done();
});

gulp.task('default', ['js', 'html', 'css'], function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch('js/*.js', ['js-watch']);
    gulp.watch('css/*.css', ['css-watch']);
    gulp.watch('*html', ['html-watch']);
});

以上的程式碼看起來雖然冗長,但是日後可以在css和js之下加上其它需要的像是uglify等等功能,所以留著這樣的架構也方便修改。
經由以上的設定之後,我們只要在命令提示字元(VS code之內的整合式終端機中前入命令也可以)的地方執行gulp,如下圖所示:

gulp就會自動開啟瀏覽器瀏覽目前的網頁,一旦我們在css、js或是根目錄下對於相關檔案進行任何存檔動作之後,gulp就會自動幫我們重新載入網頁讓我們看到最新的執行結果,非常地方便。