前端自動化構建工具gulp

關於學習gulp，推薦你們看前端構建工具gulpjs的使用介紹及技巧，這篇文章做爲入門學習資料仍是不錯的。

gulp的安裝

gulp是基於nodejs開發的，因此首先肯定安裝了nodejs。

(1)全局安裝gulp

npm install -g gulp

(2)針對項目局部安裝gulp

npm install gulp

(3)在項目目錄下安裝gulp依賴包

npm install --save-dev gulp

或者在項目目錄下安裝package.json中配置的全部依賴，能夠手動添加package.json文件

npm install

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "This is a little exercise on gulp",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify-html":"^1.0.6",
    "gulp-minify-css":"^1.2.4"
  },"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "heshuaishuai",
  "license": "ISC"
}

gulp的使用

(1)首先在項目的根目錄下建立一個gulpfile.js文件

/**
 * Created by heshuaishuai on 2016/12/5.
 */
var gulp = require('gulp'),//加載gulp模塊
    uglify = require('gulp-uglify'),//加載壓縮js模塊
    concat = require('gulp-concat'),//加載合併模塊
    htmlmin = require('gulp-minify-html'),//加載壓縮html模塊
    cssmin = require('gulp-minify-css');//加載壓縮css模塊
//輸出hello
gulp.task('hello',function () {
    console.log('hello');
});
//壓縮js
gulp.task('minify-js',function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'));
});
//合併js
gulp.task('concat-js',function () {
    gulp.src('dest/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dest/js'));
});
//壓縮html
gulp.task('minify-html',function () {
    gulp.src('index.html')
        .pipe(htmlmin())
        .pipe(gulp.dest('dest/html'));
});
//壓縮css
gulp.task('minify-css',function () {
    gulp.src('css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dest/css'));
});
gulp.task('default',['hello','minify-js','concat-js','minify-html','minify-css']);

require()函數用於加載依賴模塊，

gulp.task("default",[])爲默認任務，當在命令行數據gulp命令時，default後面數組中的任務將被自動執行。

(2)運行gulp

gulp

　　

gulp的API

gulp的API主要的有gulp.task、gulp.src、gulp.dest、gulp.watch;

(1)gulp.src

gulp.src方法正是用來獲取流的，但要注意這個流裏的內容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲着原始文件的路徑、文件名、內容等信息。其語法爲：　　

gulp.src(globs[, options])　　　　

globs參數是文件匹配模式(相似正則表達式)，用來匹配文件路徑(包括文件名)，固然這裏也能夠直接指定某個具體的文件路徑。當有多個匹配模式時，該參數能夠爲一個數組。
options爲可選參數。 

下面咱們重點說說Gulp用到的glob的匹配規則以及一些文件匹配技巧。
Gulp內部使用了node-glob模塊來實現其文件匹配功能。咱們可使用下面這些特殊的字符來匹配咱們想要的文件：

• * 匹配文件路徑中的0個或多個字符，但不會匹配路徑分隔符，除非路徑分隔符出如今末尾
• ** 匹配路徑中的0個或多個目錄及其子目錄,須要單獨出現，即它左右不能有其餘東西了。若是出如今末尾，也能匹配文件。
• ? 匹配文件路徑中的一個字符(不會匹配路徑分隔符)
• [...] 匹配方括號中出現的字符中的任意一個，當方括號中第一個字符爲^或!時，則表示不匹配方括號中出現的其餘字符中的任意一個，相似js正則表達式中的用法
• !(pattern|pattern|pattern) 匹配任何與括號中給定的任一模式都不匹配的
• ?(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或1次，相似於js正則中的(pattern|pattern|pattern)?
• +(pattern|pattern|pattern) 匹配括號中給定的任一模式至少1次，相似於js正則中的(pattern|pattern|pattern)+
• *(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或屢次，相似於js正則中的(pattern|pattern|pattern)*
• @(pattern|pattern|pattern) 匹配括號中給定的任一模式1次，相似於js正則中的(pattern|pattern|pattern) 

下面以一系列例子來加深理解 

• * 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
• *.* 能匹配 a.js,style.css,a.b,x.y
• */*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
• ** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來匹配全部的目錄和文件
• **/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
• a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
• a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,由於只有單**單獨出現才能匹配多級目錄
• ?.js 能匹配 a.js,b.js,c.js
• a?? 能匹配 a.b,abc,但不能匹配ab/,由於它不會匹配路徑分隔符
• [xyz].js 只能匹配 x.js,y.js,z.js,不會匹配xy.js,xyz.js等,整個中括號只表明一個字符
• [^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js 

當有多種匹配模式時可使用數組　　

gulp.src(['js/*.js','css/*.css','*.html']);

(2)gulp.dest

gulp.dest()方法是用來寫文件的，其語法爲：　

gulp.dest(path[,options])

path爲寫入文件的路徑
options爲一個可選的參數對象。

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

gulp.task('minify-js',function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'));
});

(3)gulp.task

gulp.task方法用來定義任務，其語法爲：　　

gulp.task(name[, deps], fn)

name 爲任務名
deps 是當前定義的任務須要依賴的其餘任務，爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數
fn 爲任務函數，咱們把任務要執行的代碼都寫在裏面。該參數也是可選的。　　　

gulp.task('default',['hello','minify-js','concat-js','minify-html','minify-css'],function(){
　　
});

(4)gulp.watch

gulp.watch方法用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務，例如文件壓縮等。其語法爲　　　

gulp.watch(glob[, opts], tasks)

glob 爲要監視的文件匹配模式，規則和用法與gulp.src()方法中的glob相同。
opts 爲一個可選的配置對象，一般不須要用到
tasks 爲文件變化後要執行的任務，爲一個數組　　　

//監聽事件
gulp.task('watch',function () {
    //當js文件夾下的js發生變化，就執行壓縮命令
    gulp.watch('js/*.js',['minifyJs']);
});

gulp插件

在輸入命令時添加--save-dev讓package.json自動生成依賴　

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-load-plugins": "^1.4.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^2.0.0"
  }, 

(1)壓縮js

npm install --save-dev gulp-uglify

gulp.task('minify-js',function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'));
});

(2)合併js

npm install --save-dev gulp-concat

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

(3)壓縮css

npm install --save-dev gulp-minify-css

gulp.task('minify-css',function () {
    gulp.src('css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dest/css'));
});

(4)文件指紋，以js爲例

npm install --save-dev gulp-rev gulp-rev-collector

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')();

//壓縮合並js，生成文件指紋
gulp.task('minifyJs',function(){
    return gulp.src('js/*.js')
            .pipe(plugins.concat('main.min.js'))
            .pipe(plugins.uglify())
            .pipe(plugins.rev())//爲main.min.js隨機添加10位hash值
            .pipe(gulp.dest('dest/minJs'))
            .pipe(plugins.rev.manifest())//生成與文件對應的鍵值對
            .pipe(gulp.dest('rev/json'))
});
//替換引入的文件
gulp.task('htmlRouter',function () {
    return gulp.src(['rev/**/*.json','index.html'])
            .pipe(plugins.revCollector())//替換引入的文件，將改完名的文件引入
            .pipe(gulp.dest('./'))
});
//監聽事件
gulp.task('watch',function () {
    //當js文件夾下的js發生變化，就執行壓縮命令
    gulp.watch('js/*.js',['minifyJs']);
});
gulp.task('default',['minifyJs','watch','htmlRouter']);

關於文件指紋，推薦Gulp--文件壓縮和文件指紋,這篇文章不錯。　　

結束語

以上主要講解了gulp的安裝，主要的API及一些簡單的插件使用。有什麼不懂或者有錯誤能夠給我留言！