常用的 gulp plugin 整理

其實之前有使用Fire.app的，不過在windows底下SASS存檔編譯的速度實在太慢了，配合LiveReload來說用起來很不順手，剛好在前端聚會聽大大提起後，立刻開始研究。

這篇將常用的列出來，下一篇寫配置

常用的gulp plugin

擺在上面供查詢，若有推薦的也可以留言分享

• gulp
• gulp-concat - 最後輸出用
• gulp-uglify - 壓縮js
• gulp-imagemin - 壓縮圖片
• gulp-autoprefixer - css自動修正
• gulp-minify-css - 最小化css
• gulp-sass - 處理SASS
• gulp-compass - 需要裝Ruby，也是用來處理SASS
• gulp-watch - 偵聽檔案、資料夾變化
• gulp-livereload - 就livereload
• gulp-gzip - 檔案自動gzip壓縮，不過通常都由server統一處理了
• gulp-zip - 壓縮用，配合exec可以做很多事
• gulp-clean - 刪除檔案
• gulp-exec - 透過他執行指令，用這個混搭幾乎就是一鍵佈署
• gulp-if - 三元判斷用
• gulp-order - 排序stream用，不過我個人測試都失敗 囧
• gulp-notify - 跳出提醒用，windows要裝Growl for Windows
• gulp-rename - 重新命名用
• gulp-plumber - 報錯後仍繼續執行

下面是使用 npm install gulp-xxx --save 存下來的package.json npm 配置

packge.json

{
    "name": "static-dev-mode",
    "version": "0.1.0",
    "description": "Create a development environment",
    "author": "Lanc <mail@mail.com>",
     "dependencies": {
    "gulp": "^3.8.3",
    "gulp-concat": "^2.2.0",
    "gulp-uglify": "^0.3.1",
    "gulp-imagemin": "^0.6.1",
    "gulp-autoprefixer": "0.0.7",
    "gulp-minify-css": "^0.3.5",
    "gulp-sass": "^0.7.2",
    "gulp-compass": "^1.1.9",
    "gulp-watch": "^0.6.8",
    "gulp-livereload": "^2.1.0",
    "gulp-gzip": "0.0.8",
    "gulp-zip": "^0.4.0",
    "gulp-clean": "^0.3.1",
    "gulp-exec": "^2.0.1",
    "gulp-if": "^1.2.1",
    "gulp-order": "^1.1.1",
    "gulp-notify": "^1.4.0",
    "gulp-rename": "^1.2.0",
    "gulp-plumber": "^0.6.3"
    

}

``` 

建立好檔案以後，執行`npm i`就能安裝啦。

接下來就是宣告，

### 載入相關plugin載
``` javascript gulpfile.js

var gulp = require('gulp');

var concat = require('gulp-concat'),           // 合併文件
    gulpif  = require('gulp-if'),           // 三元判斷
    uglify = require('gulp-uglify'),           // 壓縮js
    order = require("gulp-order"),           // 排序
    sass = require('gulp-sass'),              // sass
    compass = require('gulp-compass');          // sass用
    minifyCSS = require('gulp-minify-css'),     // css壓縮
    imagemin = require('gulp-imagemin'),      // 圖檔壓縮
    autoprefixer = require('gulp-autoprefixer'),// 自動修正css
    livereload = require('gulp-livereload'),      // 存檔後自動refresh
    plumber = require('gulp-plumber'),           // 報錯後繼續執行Stream
    watch = require('gulp-watch'),          //偵聽檔案變化
    notify = require('gulp-notify'),           // 提示訊息用
    rename = require('gulp-rename'),           // 改名
    path = require('path');

設定路徑

gulpfile.js

var paths = {

  styles: {
        src:    './public/assets/styles',
        files:  './public/assets/styles/*.css',
        dest:   './build/public/assets/css'
  },

  sass: {
        src:    './public/assets/sass',
        files:  './public/assets/sass/main.scss',
        dest:   './build/public/assets/sass'
  },

  scripts:{
        src:    './public/assets/javascripts',
        files:  './public/assets/javascripts/*',
        dest:   './build/public/assets/javascripts'
  },

  images:{
        src:    './public/assets/images',
        files:  './public/assets/images/**/*',
        dest:   './build/public/assets/images'
  }

};

相關配置請看下一篇啦。