gulp基本介紹

1、gulp是什麼

gulp就是用來機械化的完成重複性質（如less->css；js、css壓縮；js混淆）的工做；gulp的機制就是將重複工做抽象成一個個的任務。

2、gulp使用

a.首先確保電腦上已經正確安裝了node環境；

b.其次再全局安裝gulp，命令行語句：npm install -g gulp；

c.在項目根目錄下添加一個gulpfile.js文件，這個是gulp的主文件，這個文件名是固定的；d.在gulpfile中抽象咱們須要作的任務。

小案例：

'use strict';
//在gulpfile中先載入gulp包，由於這個包提供了一些API
var gulp=require('gulp');
var less=require('gulp-less');
var cssnano=require('gulp-cssnano');
var concat=require('gulp-concat');
//1.less編譯 壓縮 合併:此處沒有演示導包，由於通常預處理css(如less sass)均可以導包
gulp.task('style',function(){//style爲任務名
  //這裏是在執行style任務時自動執行的
  gulp.src(['src/styles/*.less','!src/styles/_*.less'])//指不獲取_*.less
  .pipe(less())
  .pipe(cssnano())//壓縮
  //在cmd中執行gult style後會在根目錄下自動生成dist/styles/app.css
  .pipe(gulp.dest('dist/styles'))
  .pipe(browserSync.reload({
      stream: true
    }));//從新刷新;
})


//2.JS合併 壓縮  混淆
var uglify=require('gulp-uglify');
gulp.task('script',function(){
  gulp.src('src/scripts/*.js')
  .pipe(concat('all.js'))
  .pipe(uglify())
  .pipe(gulp.dest('dist/scripts'))
  .pipe(browserSync.reload({
      stream: true
    }));//從新刷新
  })

//3.圖片複製,會在根目錄下生成dist/images/pipe.png,即把
//src/images下全部的圖片都生成到目錄dist/images下
gulp.task('image',function(){
  gulp.src('src/images/*.*')
  .pipe(gulp.dest('dist/images'))
  .pipe(browserSync.reload({
      stream: true
    }));//從新刷新;
})

//4.html
var htmlmin=require('gulp-htmlmin')
gulp.task('html',function(){
  gulp.src('src/*.html')
  .pipe(htmlmin({
    collapseWhitespace:true,//壓縮
    removeComments:true//壓縮後去掉註釋
    }))
  .pipe(gulp.dest('dist'))
  .pipe(browserSync.reload({
      stream: true
    }));//從新刷新
})

//5.server
var browserSync=require('browser-sync');
gulp.task('serve',function(){
  browserSync({
    server:{
      baseDir:['dist']//設置目錄
    },
    },function(err,bs){
      console.log(bs.options.getIn(['urls','local']));
      });
//監視文件，當參數1有改變時應該執行參數2任務，每一個任務裏須要加pipe(browserSync.reload())
  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
  })

gulp.task(參1，參2)中第一個參數爲任務名稱，第二個參數爲具體要執行的任務描述。要運行gulp任務，只需切換到存放gulpfile.js文件的目錄(windows平臺請使用cmd或者Power Shell等工具)，而後在命令行中執行gulp命令就好了，gulp後面能夠加上要執行的任務名，例如gulp style，若是沒有指定任務名，則會執行任務名爲default的默認任務。

3、gulp基本API

1.gulp.src()

Gulp中，使用的是Nodejs中的stream(流)，首先獲取到須要的stream，而後能夠經過stream的pipe()方法把流導入到你想要的地方，好比Gulp的插件中，通過插件處理後的流又能夠繼續導入到其餘插件中，固然也能夠把流寫入到文件中。因此Gulp是以stream爲媒介的，它不須要頻繁的生成臨時文件，這也是Gulp的速度比Grunt快的一個緣由。再回到正題上來，gulp.src()方法正是用來獲取流的，但要注意這個流裏的內容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲着原始文件的路徑、文件名、內容等信息，這個咱們暫時不用去深刻理解，你只需簡單的理解能夠用這個方法來讀取你須要操做的文件就好了。

2.gulp.dest()

gulp.dest()方法是用來寫文件的，要想使用好gulp.dest()這個方法，就要理解給它傳入的路徑參數與最終生成的文件的關係。gulp的使用流程通常是這樣子的：首先經過gulp.src()方法獲取到咱們想要處理的文件流，而後把文件流經過pipe方法導入到gulp的插件中，最後把通過插件處理後的流再經過pipe方法導入到gulp.dest()中，gulp.dest()方法則把流中的內容寫入到文件中，這裏首先須要弄清楚的一點是，咱們給gulp.dest()傳入的路徑參數，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，它生成文件的文件名使用的是導入到它的文件流自身的文件名，因此生成的文件名是由導入到它的文件流決定的，即便咱們給它傳入一個帶有文件名的路徑參數，而後它也會把這個文件名當作是目錄名。

3.gulp.task()

gulp.task(name[, deps], fn),其中name爲任務的名字，若是你須要在命令行中運行你的某些任務，那麼，請不要在名字中使用空格。deps爲一個包含任務列表的數組，這些任務會在你當前任務運行以前完成。你的任務是否在這些前置依賴的任務完成以前運行了？請必定要確保你所依賴的任務列表中的任務都使用了正確的異步執行方式：使用一個 callback，或者返回一個 promise 或 stream。

該函數定義任務所要執行的一些操做。一般來講，它會是這種形式：gulp.src().pipe(someplugin())。

注意： 默認的，task 將以最大的併發數執行，也就是說，gulp 會一次性運行全部的 task 而且不作任何等待。若是你想要建立一個序列化的 task 隊列，並以特定的順序執行，你須要作兩件事：

• 給出一個提示，來告知 task 何時執行完畢，
• 而且再給出一個提示，來告知一個 task 依賴另外一個 task 的完成。

對於這個例子，讓咱們先假定你有兩個 task，"one" 和 "two"，而且你但願它們按照這個順序執行：

　　a.在 "one" 中，你加入一個提示，來告知何時它會完成：能夠再完成時候返回一個 callback，或者返回一個 promise 或 stream，這樣系統會去等待它完成。

　　b.在 "two" 中，你須要添加一個提示來告訴系統它須要依賴第一個 task 完成。

所以，這個例子的實際代碼將會是這樣：

var gulp = require('gulp');

// 返回一個 callback，所以系統能夠知道它何時完成
gulp.task('one', function(cb) {
    // 作一些事 -- 異步的或者其餘的
    cb(err); // 若是 err 不是 null 或 undefined，則會中止執行，且注意，這樣表明執行失敗了
});

// 定義一個所依賴的 task 必須在這個 task 執行以前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成後
});

gulp.task('default', ['one', 'two']);

4.gulp.watch()

gulp.watch()用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務。

gulp.watch(glob[,opts],tasks),其中glob爲一個字符串或包含多個glob字符串的數組，用來指定具體監控哪些文件的變更。opts一個可選的配置對象，一般不須要用到。tasks爲文件變化後要執行的任務，爲一個數組。

gulp.watch第三個參數還能夠爲callback,表明每次變更後須要執行的回調函數，如：

gulp.watch('js/**/*.js', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    //callback 會被傳入一個名爲 event 的對象。這個對象描述了所監控到的變更