gulp的使用

前言

對於前端自動化，大家可能開始想到的是Grunt而且最開始學的是也是它。沒錯，剛開始學習grunt時，發現它真的很方便，很多額外的操作都可以通過一個命令自動執行。而我使用Grunt的方式也很簡單，就是爲了更好的保護的F5鍵。

Grunt自動刷新

再使用Grunt之前，需要在項目的根目錄下新建一個package.json文件，我們可以通過npm init自動創建該文件，然後按照提示輸入相關信息即可。（未知的可直接回車跳過。）

接下來需要加載所需要的三個grunt插件：grunt-contrib-connect,grunt-contrib-livereload,grunt-contrib-watch。而我們選擇通過npm方式加載：npm install 插件 --save-dev這樣package.json文件中的devDependencies就會自動填寫剛剛下載的插件。
接下來需要在根目錄新建另一個文件Gruntfile.js文件，裏面需要你使用grunt的相關配置，而我一般都會將經常使用的配置代碼備份，使用時直接拷貝進去即可。

module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
    watch: {
      livereload: {
          options: {
              livereload: '<%= connect.options.livereload %>'
          },
          files: [
              'index.html',
              'static/**'
          ]
      }
    },
    connect: {
      options: {
          port: 8000,
          open: true,
          livereload: 35729,
          hostname: 'localhost'
      },
      server: {
        options: {
          port: 8001,
          base: './'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('watching',['connect','watch']);
  grunt.registerTask('default');

};

然後我們就可以直接在命令行輸入grunt watching使用。
ps:上述把一些img、js、css文件放在static目錄下。
上述我們就可以在編輯器裏只負責編寫相應的代碼即可，保存後瀏覽器頁面就會自動更新，而無需我們再通過刷新。這確實很方便。但是：
當我想使用別的插件,例如grunt-contrib-less、grunt-autoprefix等其它插件時，必須再次編寫這些新增插件的配置。這時，你必須查閱相關文檔學習其它插件的配置編寫方式。此時就會感覺很麻煩，特別是時間長時，你會忘記這些插件的編寫格式。這就強迫你使用另外一種更簡單的自動化方式，例如gulp

gulp

至於gulp的學習大家可以參考gulp中文官網gulp中文官網，API非常少，只有4個：

• gulp.src() 讀取一個文件，返回一個文件流。接下來可多次調用用pipe()進行鏈式操作
  讀取的文件名匹配格式如下：

  • ”*”匹配任意文件名，不包含目錄
  • “**” 匹配任意目錄及相應目錄下的文件
• gulp.dest() 將管道中的文件流生成文件
• gulp.task() 定義任務
• gulp.watch() 監控文件變換，執行任務

接下來主要說明鄙人實際項目中的一些gulp插件的使用。
首先，需要在根目錄中新建package.json文件，然後下載gulp及需要用到的gulp插件，這個grunt中的步驟一樣。用到的插件有：

• gulp-less less的編譯
• gulp-autoprefixer 加載css前綴
• gulp-concat 文件合併
• gulp-minify-css css文件壓縮
• gulp-jshint js代碼檢查
• gulp-uglify js文件壓縮
• gulp-minify-html html文件壓縮
• gulp-imagemin 圖片壓縮
• gulp-rename 文件重命名
• gulp-load-plugins 一次性加載插件
• gulp-livereload 自動刷新插件
• gulp-connect 和livereload合作，構造一個虛擬服務器

接下來，我們需要在根目錄下創建gulpfile.js文件，然後在裏面寫一些插件的處理。
gulp-less 與gulp-autoprefixer

var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('compile', function() {
    gulp.src('static/less/*.less')
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(gulp.dest('static/style'));
});

gulp-concat

var gulp = require('gulp'),
    concat = require('gulp-concat');

gulp.task('concat', function() {
    gulp.src('static/style/*')
        // 合併匹配的css文件並命名
        .pipe(concat('all.css'))
        .pipe(gulp.dest('static/css'));
});

文件壓縮

var gulp = require('gulp'),
    minifyCss = require('gulp-minify-css');

gulp.task('miniCss', function() {
    gulp.src('static/css/*')
        .pipe(minifyCss())
        .pipe(gulp.dest('static/css'));
});

html，js文件壓縮與此相同。
另外，由於gulp是依靠文件流的方式進行操作，壓縮過程中的文件名無法更改。文件名的更改則需要用到rename插件。
gulp-rename

var gulp = require('gulp'),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename');

gulp.task('miniCss', function() {
    gulp.src('static/css/*')
        .pipe(minifyCss())
        .pipe(rename('all.min.css'))
        .pipe(gulp.dest('static/css'));
});

gulp-imagemin
gif、jpeg、png、svg的圖片壓縮，其它文件直接忽略。
ps：png圖片的壓縮用到imagemin-pngquant插件。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('imgMin', function () {
    return gulp.src('static/images/*')
        .pipe(imagemin({
            use: [pngquant()]
        }))
        .pipe(gulp.dest('static/img'));
});

gulp-load-plugins
該插件是根據package.json文件中的devDependencies中的配置一次性加載所有的gulp插件。試想一下，當我們同時需要加載上述所有插件時，需要一次次重複使用require()來加載。爲了避免繁瑣，我們可以使用該插件。package.json中的devDependencies：

"devDependencies": {
    "gulp": "^3.9.0",
    "gulp-rename": "^1.2.2",
    "gulp-load-plugins": "^1.0.0-rc.1",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css": "^1.2.0",
    "gulp-uglify": "^1.2.0",
    "gulp-livereload": "^3.8.0",
    "gulp-connect": "^2.2.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-less": "^3.0.3",
    "gulp-jshint": "^1.11.2",
    "gulp-minify-html": "^1.0.4",
    "gulp-imagemin": "^2.3.0",
    "imagemin-pngquant": "^4.1.2"
  }

ps：imagemin-pngquant插件需要手動加載。

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var pngquant = require('imagemin-pngquant');

gulp.task('imgMin', function () {
    return gulp.src('static/images/*')
        .pipe(plugins.imagemin({
            use: [pngquant()]
        }))
        .pipe(gulp.dest('static/img'));
});

加載完成之後我們可以通過plugins.name的方式使用相應插件，即name的格式爲對應插件名去掉gulp前綴的名字，如果中間有“—”，則使用駝峯格式。如：

plugins.minifyHtml = require('gulp-minify-html');

gulp-livereload與gulp-connect

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

// 構建服務器
gulp.task('connect', function() {
    connect.server({
        root: './', //服務器根目錄
        port: 8000, //端口號
        livereload: true
    });
});

gulp.task('html', function() {
    gulp.src('index.html') // 獲取自動刷新頁面
        .pipe(livereload());
});

gulp.task('watching', ['connect'], function () {
    livereload.listen();
    gulp.watch(['index.html','static/style/*','static/img/*'],['html']); // 監控相關文件，綁定刷新頁面
});

經過上面介紹，你會發現gulp的確比grunt優秀了那麼一點點。。。