gulp備忘錄

• 以前一直用的webpack,發現有些臃腫,彷彿一個插滿了各類兵器的架子.要啥有啥,可是每次都得搬個架子,確實夠累
• gulp基於nodejs的流操做,沒有聲勢卻暗放光華,爲所欲爲,確實輕巧好用
• 本文只作簡單實用記錄,具體高級的用法,請參見官方文檔

gulp工做流程:

1. 經過 gulp.src() 獲取上游文件流
2. pipe()方法把文件流導入到 gulp插件 中
3. 經過pipe把處理後的流導入到 gulp.dest()中g

4. gulp.dest() 是把流中的內容寫入到文件中
    還有一個很重要的api gulp.watch()

gulp.src('res/src.js')
	.pipe(gulp.dest('dist/dist.js'))

gulp.src(globs,[options]) 獲取須要操做的文件 globs是文件匹配模式(相似正則表達式)

gulp.dest(path,[opts]) 把文件流中的內容寫入到硬盤文件

注意:

• 咱們傳入的路徑參數只能用來指定***要生成的文件的目錄***,而不能指定生成文件的文件名
• 生成的文件名是由導入到它的文件流決定-> 可使用gulp-rename模塊改變文件名
• 經過指定 gulp.src()中的base參數,能夠靈活的改變gulp.dest()生成的文件路徑 咱們能夠理解爲,gulp.dest中的path路徑代替了gulp.src的base看\路徑

gulp.src(script/lib/*.js) //沒有配置base參數，此時默認的base路徑爲script/lib
 //假設匹配到的文件爲script/lib/jquery.js
.pipe(gulp.dest('build')) //生成的文件路徑爲 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base參數，此時base路徑爲script
//假設匹配到的文件爲script/lib/jquery.js
.pipe(gulp.dest('build')) //此時生成的文件路徑爲 build/lib/jquery.js     
用gulp.dest()把文件流寫入文件後，文件流仍然能夠繼續使用。

gulp.task() 定義一個任務

• gulp.task(name,[deps],fn) /**
  • name:任務名
  • deps:當前任務的依賴,可選
  • fn: 當前任務的實現函數,當前任務須要執行的代碼都寫在fn裏面 */
• 注意: 若是它的依賴中含有異步代碼的,會先把依賴中的同步代碼執行,而後就執行fn,不會等待"依賴中的異步代碼"

gulp.watch() 監視文件的變化,當文件發生變化時,執行相應的操做(例如文件壓縮)

• 使用方法

• gulp.wacth(glob,[opts],tasks) /**

• opts: 可選的配置對象,通常不用

• tasks [Array] 監測到文件變化時,要執行的任務 */

  gulp.task('uglify',function(){
  	  //do something
  	});
  	gulp.task('reload',function(){
  	  //do something
  	});
  	gulp.watch('js/**/*.js', ['uglify','reload']);

• gulp.watch(glob,[opts],cb(event)) /**

• cb參數爲一個函數。每當監視的文件發生變化時，就會調用這個函數
• 而且會給它傳入一個對象，該對象包含了文件變化的一些信息，
• type屬性爲變化的類型，能夠是 added , changed , deleted ；
• path 屬性爲發生變化的文件的路徑 */

  gulp.watch('js/**/*.js', function(event){
  	    console.log(event.type); //變化類型 added爲新增,deleted爲刪除，changed爲改變 
  	    console.log(event.path); //變化的文件的路徑
  	});

gulp插件

• 使用
  1. npm install --save-dev xxx 安裝插件
  2. 在gulpfile.js頂部require此插件
  3. 在task中使用插件
• 經常使用插件
  • gulp-load-plugins 自動加載package.json中的gulp插件 例如

  var gulp = require('gulp');
  	//加載gulp-load-plugins插件，並立刻運行它
  	var $ = require('gulp-load-plugins')();

  而後就能夠$.concat和$.connect來代替了,也就是原始插件名去掉gulp-前綴，以後再轉換爲駝峯命名。
  • gulp-less 編譯 less文件
  • gulp-connect 建立本地服務器

一個示例配置

var gulp = require('gulp');
gulp.task('copy-html',function(){
	return gulp.src('index.html')
		       .pipe(gulp.dest('dist'))
})

gulp.task('cp-imgs',function(){
	//return gulp.src('res/imgs/*.{css,jpg}')// 複製多個後綴名的文件類型
	return gulp.src(['res/imgs/*.{css,jpg}'])
			   .pipe(gulp.dest('dist'))

})

//組合任務
gulp.task('default',['copy-html','copy-imgs'],function(){
    console.log('所有拷貝任務執行完畢!');
});
//-------------------

gulp.task('f1',function(){
    console.log('111111!');
});
gulp.task('f2',function(){
    console.log('2222222!');
});

gulp.task('watch',function(){
	gulp.watch('index.html',['f1','f2']);
}) //-> 每一次監聽到index.html的變化以後,都會執行 f1和f2

//========
var less = require('gulp-less');
gulp.task('trsless',function(){
	return gulp.src('res/less.less')
			   .pipe(less())// 讓less執行,用less模塊來處理這個流
			   .pipe(gulp.dest('dist'));
})

//------------
var connect = require('gulp-connect');
    
gulp.task('server',function(){
   connect.server({
       root:'dist',//服務器的根目錄
       port:8080 //服務器的地址，沒有此配置項默認也是 8080
   });
});

//++++++++文件變化時,瀏覽器自動刷新++++++++++++


gulp.task('copy-html',function(){
     gulp.src('app/index.html')//指定源文件
         .pipe(gulp.dest('dist'))//拷貝到dist目錄
         .pipe(connect.reload());//通知瀏覽器重啓
});

gulp.task('watch',function(){
    gulp.watch('app/index.html',['copy-html']);//當index.html文件變化時執行copy-html任務
});

gulp.task('server',function(){
    connect.server({
        root:'dist',//服務器的根目錄
        port:8080, //服務器的地址，沒有此配置項默認也是 8080
        livereload:true//啓用實時刷新的功能
    });
});
gulp.task('default',['server','watch']);//運行此任務的時候會在8080上啓動服務器，