Gulp 入門
安裝
- 全局安裝 gulp：
npm install gulp --global // --global 代表全局
```
- 3. 開發(fā)依賴安裝:進(jìn)入項(xiàng)目的根目錄執(zhí)行命令 (在項(xiàng)目的根目錄里創(chuàng)建一個(gè)package.json)
````js
npm install gulp --save-dev
// --save將保存配置信息至package.json -dav 保存至package.json的devDependencies節(jié)點(diǎn)
- 在 package.json 同級(jí)目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default',function(){ //gulp 默認(rèn)會(huì)執(zhí)行的任務(wù)
// do something
});
- 運(yùn)行 gulp:
gulp
Gulp API
gulp 的 API 非常簡(jiǎn)單
gulp.src('匹配模式或者匹配模式數(shù)組',['參數(shù)']) //匹配模式 類似正則表達(dá)式
.pipe(functionName()) // 獲取操作后的文件流，傳遞給括號(hào)里面的函數(shù)
gulp.dest('path',['options']); // 將上一步操作后的文件輸出到 path 路徑里
gulp.task('任務(wù)的名稱',function(){
// dosomething
// for example :
gulp.start(['任務(wù)名稱1,任務(wù)名稱2']);
});
gulp.watch('監(jiān)聽對(duì)象',['任務(wù)1']);
// 監(jiān)聽對(duì)象:1菩鲜、匹配模式; 2特铝、任務(wù)名稱
// 任務(wù)1:在監(jiān)聽對(duì)象發(fā)生變化后需要執(zhí)行的任務(wù)
編譯SASS Demo ,前提是已經(jīng)安裝了 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()) //執(zhí)行編譯
.pipe(gulp.dest('css')) ;
});
這里只是簡(jiǎn)單介紹了一下他的API，更詳細(xì)的API請(qǐng)點(diǎn)解這里中文鳍置，這里英文
Gulp 常用插件列表
Gulp 有著非常豐富的插件庫壕探，在他的官網(wǎng)里可以直接查詢或者是到github 查找琅催，如果都沒有圆丹，沒關(guān)系還可以自己開發(fā)一個(gè)。這里就不重復(fù)了躯喇，別人有現(xiàn)成的辫封。
