最後一篇,來介紹gulp-compass,這一篇的內容較短,但是要特別注意系統是否可以運作ruby以及ruby compass(由於compass有更新),所以和前一篇的差別會是多了ruby。
gulp-compass是呼叫ruby compass來運作,所以電腦內必須有ruby環境,所以建議先確認電腦內的ruby compass是否能正常運作,再來進行以下步驟。而目前compass的版本是1.01^,詳情就請參照compass官方網站。
安裝Compass
記得,在安裝compass與susy前,請確認電腦裡是否有ruby的環境,terminal內輸入ruby -v
。
ruby -v
接下來輸入以下指令來安裝compass。可參考http://compass-style.org/install/
gem update —system
gem install compass
輸入gem install susy
,來安裝susy。可參考http://susydocs.oddbird.net/en/latest/install/
輸入以下指令來驗證是否安裝成功
compass -v
gem -v susy
gulp-compass
這一段和之前也相同,打開terminal輸入npm install —save-dev
,安裝完後打開gulpfile.js。
這個範例已經包含常用的設定,當然也可以參考https://www.npmjs.org/package/gulp-compass。
//gulpfile.js
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
webserver = require('gulp-webserver'),
compass = require('gulp-compass'), //新增gulp-compass
coffee = require('gulp-coffee');
gulp.task('compass', function() {
gulp.src('app/sass/*.sass') //來源路徑
.pipe(compass({ //這段內輸入config.rb的內容
css: 'app/assets/css', //compass輸出位置
sass: 'app/sass', //sass來源路徑
sourcemap: true, //compass 1.0 sourcemap
style: 'compact', //CSS壓縮格式,預設(nested)
comments: false, //是否要註解,預設(true)
require: ['susy'] //額外套件 susy
}))
// .pipe(gulp.dest('app/assets/temp')); //輸出位置(非必要)
});
gulp.task('watch', function () { //自定一個watch的排程名稱
gulp.watch('./app/coffeescripts/*.coffee', ['coffee']); //監聽路徑,以及檔案變更後所執行的任務
gulp.watch('./app/sass/*.sass', ['compass']);
});
gulp.task('default', ['coffee','compass','webserver','watch']);
接下來輸入gulp,就可以開始使用compass 1.0了,當然這邊要特別注意susy,這susy的版本是2,與1差異很大,如果安裝後想使用susy1,sass內import請輸入 @import “susyone”。
//sass 檔案內容
@import "compass/reset"
@import "compass"
@import "susy"
body
background-color: black
.container
+container(80em)
.span6
color: orange
+span(6 of 12)
會輸出成像下面這樣,還會包含source map。
/*css reset…. 略*/
body { background-color: black; }
.container { max-width: 80em; margin-left: auto; margin-right: auto; }
.container:after { content: " "; display: block; clear: both; }
.span6 { color: orange; width: 49.15254%; float: left; margin-right: 1.69492%; }
/*# sourceMappingURL=style.css.map */
如果是從前面的相關文章開始看,目前gulpfile.js檔案結果會像下面這樣。
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
webserver = require('gulp-webserver'),
compass = require('gulp-compass'),
coffee = require('gulp-coffee');
gulp.task('coffee', function() { //‘coffee'是排程名稱,可自定
gulp.src('./app/coffeescripts/*.coffee') //來源檔案
.pipe(coffee()) //編譯
.pipe(concat('main.js')) //合併成一隻
.pipe(uglify()) //壓縮、醜化
.pipe(gulp.dest('./app/assets/js')) //輸出位置
});
gulp.task('webserver', function() {
gulp.src('app') //起始目錄
.pipe(webserver({
host: '0.0.0.0', //host設定'0.0.0.0',就可以用內網檢視
port: 10000, //設定一個沒在使用的port
livereload: true, //auto refresh
open: true //執行gulp時自動開啟browser
}));
});
gulp.task('compass', function() {
gulp.src('app/sass/*.sass') //來源路徑
.pipe(compass({ //這段內輸入config.rb的內容
css: 'app/assets/css', //compass輸出位置
sass: 'app/sass', //sass來源路徑
sourcemap: true, //compass 1.0 sourcemap
style: 'compact', //CSS壓縮格式,預設(nested)
comments: false, //是否要註解,預設(true)
require: ['susy'] //額外套件 susy
}))
// .pipe(gulp.dest('app/assets/temp')); //輸出位置(非必要)
});
gulp.task('watch', function () { //自定一個watch的排程名稱
gulp.watch('./app/coffeescripts/*.coffee', ['coffee']); //監聽路徑,以及檔案變更後所執行的任務
gulp.watch('./app/sass/*.sass', ['compass']);
});
gulp.task('default', ['coffee','compass','webserver','watch']);
Gulp 系列文章