安裝 node.js
首先需要安裝 node.js, 通常情況下,只需要到 Node.js 官網下載安裝包安裝就可以了。不過我可恥的失敗了,彈出了如下錯誤:
於是我換成了 brew 大法:
brew install nodejs
安裝 Gulp
gulp 使用 Node.js 的 npm 命令安裝:
npm install --global gulp
然後在項目目錄中還要安裝一遍:
npm install --save-dev gulp
我對這步的操作比較費解。以我多年碼農經驗,即然全局安裝過了,應該就可以在作何地方使用了。但 gulp 顯然不是這樣。如果不在項目目錄中執行這一步,使用 gulp 命令時會提示以下錯誤:
… Local gulp not found in …
… Try running: npm install gulp
最後在項目目錄中執行一下 gulp 命令,如果輸出以下內容,那就表示安裝好了:
… No gulpfile found
簡單例子
下面展示使用 Gulp 構建一個靜態網站開發服務端,並且支持實時刷新(livereload)功能。
首先需要安裝 livereload 的浏覽器插件,插件地址:http://livereload.com/extensions/,支持 Chrome, Firefox, Safari 三大浏覽器。插件安裝後,會在浏覽器上出現一個按鈕,這個按鈕有兩個狀態,實心圓點表示插件已啟用,空心圓點表示插件未啟用。切記切記!
然後創建一個簡單的項目結構:
./gulpfile.js ./public/ ./public/index.html
使用以下命令安裝 gulp 和相關的組件:
npm install --save-dev gulp gulp-connect
gulp-connect 是 gulp 插件,提供了靜態 web 服務端功能,並整合了 livereload 功能。
接下來需要編輯 gulpfile.js 文件,內容如下:
var gulp = require('gulp'), connect = require('gulp-connect') gulp.task('server', function() { connect.server({ root: 'public', livereload: true }) }) gulp.task('html', function() { gulp.src('./public/*.html').pipe(connect.reload()) }) gulp.task('watch', function() { gulp.watch(['./public/*.html'], ['html']) }) gulp.task('default', ['watch', 'server'])
最後運行這個 web 服務器:
gulp
打開浏覽器,訪問 http://localhost:4000。然後嘗試修改 index.html 文件的內容後保存,正常情況下,浏覽器端應該會自動刷新並顯示修改後的內容。
Gulp與Grunt簡單對比
讓我們來看個范例,分別在Gulp及Grunt建構Sass:
Grunt:
sass: { dist: { options: { style: 'expanded' }, files: { 'dist/assets/css/main.css': 'src/styles/main.scss', } } }, autoprefixer: { dist: { options: { browsers: [ 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ] }, src: 'dist/assets/css/main.css', dest: 'dist/assets/css/main.css' } }, grunt.registerTask('styles', ['sass', 'autoprefixer']);
Grunt需要各別配置外掛,指定其來源與目的路徑。例如,我們將一個檔案作為外掛Sass的輸入,並儲存輸出結果。在設置Autoprefixer時,需要將Sass的輸出結果作為輸入,產生出一個新檔案。來看看在Gulp中同樣的配置:
Gulp:
gulp.task('sass', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'compressed' })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/assets/css')) });
在Gulp中我們只需要輸入一個檔案即可。經過外掛Sass處理,再傳到外掛Autoprefixer,最終取得一個檔案。這樣的流程加快建構過程,省去讀取及寫出不必要的檔案,只需要最終的一個檔案。