上一篇文章介紹了一些Gulp一些基本操作，但平時開發時，那些基本的操作是無法滿足我們的需求的，我們很多功能需要gulp外掛來實現。進來就來寫下平時用到的gulp外掛。可以去npm搜尋以下外掛

首先是js和css有關的外掛啦
gulp-cssmin壓縮css檔案，gulp-less處理less檔案，其他預處理也有相對應的外掛，gulp-uglify壓縮js檔案
下面演示一下外掛的使用

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');

gulp.task('cssmin', function() {
    gulp.src('A/a.css'
 
)
        .pipe(cssmin())
        .pipe(gulp.dest('B'))
})

這段程式碼很簡單就是建立cssmin任務，檔案入口是a.css出口時B資料夾，中間呼叫了cssmin方法，
執行gulp cssmin的結果就是最後在B資料夾下會自動產生一個a.css並且裡面的css已經壓縮

//A/a.css下的
.text {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}
// B/a.css下的
.text{text-align:center;font-size:16px;
 
font-weight:700}

下面再看下js壓縮

var gulp = require('gulp');
var uglify =require('gulp-uglify');

gulp.task('jsmin', function() {
    gulp.src('A/a.js')
        .pipe(uglify())
        .pipe(gulp.dest('B'))
})

程式碼就不細說了很簡單直接看結果

function Person(name,age) {
    this.name = name;
    this.age = age;
}
壓縮後的
function
 
 Person(n,e){this.name=n,this.age=e}

當然我們可以使用ES6語法，那麼我們就需要引入一些babel的gulp外掛

npm install --save-dev gulp-babel babel-preset-[env] babel-core

要安裝三個注意了，一個是gulp的babel外掛還有一個是環境[env]可選項有很多下面貼上地址，我們用的是es2015 因為我們要轉譯成2015 最後一個是babel本身的核心包

var babel = require('gulp-babel');

gulp.task('babel', () =>
    gulp.src('A/a.js')
        .pipe(babel({
            presets: ['es2015']//這裡就是我們下載的環境
        }))
        .pipe(gulp.dest('B'))
);

看一下結果，這裡用了ES6 class語法

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
}
編譯後
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person(name, age) {
    _classCallCheck(this, Person);

    this.name = name;
    this.age = age;
};

接下來再介紹一些零零碎碎用的常用外掛
livereload（瀏覽器自動重新整理）功能的外掛gulp-livereload和gulp-connect，這裡介紹下gulp-connect

var gulp = require('gulp');
var connect = require('gulp-connect')

gulp.task('connect', function() {
  connect.server({
    root: 'A',
    livereload: true,
    port: 1234
  });
  gulp.watch(['A/*.html'], ['html']);
}); 


gulp.task('html', function() {
  gulp.src('A/a.html')
    .pipe(gulp.dest('B'))
    .pipe(connect.reload());
});

gulp.task('concat', function() {
  return gulp.src('A/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('B'));
});

先寫這些，以後再在補充一些用過的其他的