Gulp 入門
安裝
- 全局安裝 gulp：
npm install gulp --global // --global 代表全局
```
- 3. 開發依賴安裝:進入項目的根目錄執行命令 (在項目的根目錄里創建一個package.json)
````js
npm install gulp --save-dev
// --save將保存配置信息至package.json -dav 保存至package.json的devDependencies節點
- 在 package.json 同級目錄下創建一個名為 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default',function(){ //gulp 默認會執行的任務
// do something
});
- 運行 gulp:
gulp
Gulp API
gulp 的 API 非常簡單
gulp.src('匹配模式或者匹配模式數組',['參數']) //匹配模式 類似正則表達式
.pipe(functionName()) // 獲取操作后的文件流，傳遞給括號里面的函數
gulp.dest('path',['options']); // 將上一步操作后的文件輸出到 path 路徑里
gulp.task('任務的名稱',function(){
// dosomething
// for example :
gulp.start(['任務名稱1,任務名稱2']);
});
gulp.watch('監聽對象',['任務1']);
// 監聽對象:1、匹配模式; 2、任務名稱
// 任務1:在監聽對象發生變化后需要執行的任務
編譯SASS Demo ,前提是已經安裝了 gulp-sass 插件(基于 Ruby編譯)
var gulp = require('gulp'),
gsass = require('gulp-sass');
gulp.task('default', function() {
gulp.start(['scss']);
});
gulp.task("scss",function(){
gulp.src('scss/*.scss')
.pipe(gsass()) //執行編譯
.pipe(gulp.dest('css')) ;
});
這里只是簡單介紹了一下他的API，更詳細的API請點解這里中文，這里英文
Gulp 常用插件列表
Gulp 有著非常豐富的插件庫，在他的官網里可以直接查詢或者是到github 查找，如果都沒有，沒關系還可以自己開發一個。這里就不重復了，別人有現成的。
