Learning Gulp

Gulp的安裝

使用npm安裝

npm install -g gulp
           

這是全局安裝,安裝到項目則是在項目目錄下使用

npm install --save-dev gulp
           

使用gulp -v檢視版本确認安裝成功

使用Gulp

建立gulpfile檔案, 運作Gulp

還是用npm安裝依賴的插件,Gulp的插件功能都好強大,哈哈哈

比如要使用sass插件編譯sass:

npm install gulp-sass --save-dev
           

然後在gulpfile.js中引入插件:

var gulp = require('gulp'),
    sass = require('gulp-sass');
           

然後就可以用了，用法和更多插件請移步Gulp中文網

在指令行中使用

gulp <task>
           

來運作。

Gulp的4個API:

1.gulp.src(globs[, options]),傳回Vinyl files的stream,可以被pipe到别的插件中

gulp.src('client/templates/*.jade')
           

2.gulp.dest(path[, options])

能被pipe進來,能寫檔案和重新輸出所有資料

gulp.src('./client/templates/*.jade)
    .pipe(jade())
    .pipe(gulp.dest('./build/templates'));
           

3.gulp.task(name[, deps],fn)

定義一個使用Orchestrator實作的任務(task)

gulp.task('jshint', function() {
    // do something
});
           

4.gulp.watch(glob[,opts],tasks)

監視檔案變動

gulp.task('watch', function () {
    gulp.watch('../ife/stage2/css/task26.scss', ['style']);
});