Gulp入門教程

Gulp介紹

Gulp是一個前端開發的自動化構建工具。
前端開發每每須要把LESS/SCSS文件進行編譯成CSS文件，JavaScript多文件合併成一個文件並壓縮以及一些其餘須要重複性操做的工做。而Gulp就是經過簡單地代碼配置與第三方插件的調用來幫助前端自動化完成這些操做。但不只限於此，你還能夠用Gulp完成頁面在線即時預覽，jshint代碼檢查等各類前端任務。

Gulp的一個普通任務流程以下：

在終端裏經過執行gulp task-name來執行指定任務，任務執行前能夠先執行依賴任務。

本文只着重講解Gulp的使用方法，其具體的安裝及各類插件請訪問Gulp官網進行查看。本教程分爲兩個部分：先講解gulp的API使用及參數說明，後以一個實際項目案例做爲演練。

第一節：接口說明

Gulp提供4個基礎API進行調用，只須要掌握這4個API的使用方法並配合Gulp插件便能搭建一套自動化的前端開發任務系統。

• gulp.task()

• gulp.src()

• gulp.dest()

• gulp.watch()

Gulp.src(globs[, options])

此接口會匹配工做目錄下指定規則的文件並返回提供給下一個插件管道使用。其中globs就是匹配格式，options是一些額外參數。

gulp.src('src/scss/master.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist’));

以上代碼匹配master.scss文件返回給管道給sass插件進行編譯操做，編譯完成後送入下一個管道給gulp.dest接口輸出到dist目錄下。

globs
類型：字符串或者數組

此參數爲文件匹配規則，例如./src/*/.scss將會匹配工做目錄下src目錄及子目錄下全部scss文件格式的文件。字符匹配規則前帶!則會排除此匹配的文件，例如：

gulp.src([
    'src/js/intro.js',
    'src/js/body.js',
    '!src/js/others.js',
    'src/hs/end.js'
]);

此將會按順序匹配intro.js，body.js，end.js，排除了others.js

options
類型：對象

options.buffer (默認：true)
當設置爲false的時候會把file.contents做爲數據流(stream)返回而不是整個緩衝文件(buffer files)，這個選項在處理較大文件的時候比較有效。可是：不少插件並不支持數據流處理。

options.read (默認：true)
當設置爲false的時候並不會讀取文件並且返回file.contents爲空。

options.base (默認：匹配規則前的目錄地址)
咱們直接用代碼演示吧：

gulp.src('src/js/**/*.js') //若是匹配到src/js/vendors/a.js, 那麼base是src/js/
    .pipe(minify())
    .pipe(gulp.dest('dist')); //寫入到dist/vendors/a.js

gulp.src('src/js/**/*.js', { base: 'src' }) //若是匹配到src/js/vendors/b.js
    .pipe(minify())
    .pipe(gulp.dest('dist')); //寫入到dist/js/vendors/b.js

gulp.dest(path[, options])

此接口直接寫入到文件裏。(若是文件夾不存在則會建立對應文件夾)

gulp.src('src/js/body.js')
    .pipe(minify())
    .pipe(gulp.dest('dist/js')); //寫入到dist/js/body.js

path
類型：字符串或者函數
具體輸出目錄或者一個函數返回目錄

options
類型：對象

options.cwd(默認：process.cwd())
只有當輸出路徑爲相對路徑的時候纔有效(通常用不到)

options.mode(默認：0777)
新建目錄的權限(通常用不到)

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

定義一個須要自動執行的任務

gulp.task('sass', function() {
    gulp.src('src/scss/master.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});
gulp.task('styles',['sass'], function() { 
    gulp.src('./dist/css/public.css') 
        .pipe(minifycss()) 
        .pipe(rename('public.min.css')) 
        .pipe(gulp.dest('dist/css'));
});

經過在終端運行gulp styles執行styles這個任務，此任務前先執行sass任務，完畢後再進行此任務，將public.css複製一份進行壓縮並重命名爲public.min.css到dist/css目錄下。這裏須要注意的是前提依賴任務若是有多個，通常它們並不會按照順序執行，而是異步執行的。

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

自動監視文件變化並執行指定的任務。

//監視'src/js/'目錄下的全部js文件，若是有變更則當即執行uglify任務
gulp.watch('src/js/**/*/js', ['uglify']);
gulp.watch(glob[, opts, cb])

自動監視文件變化並執行回調函數。

event.type
類型：字符串
事件的類型，值爲:added, changed, deleted.

event.path
類型：字符串
觸發事件的文件地址

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

第二節：實戰項目

咱們將會創建一個自動編輯scss文件及自動打包多個js文件的項目做爲演示

安裝配置

Gulp是依賴Node.js運行的，你必須先安裝Node.js，而後在命令行下經過執行如下命令全局安裝Gulp。

$ npm install --global gulp

在項目根目錄下運行如下命令建立package.json文件(用來配置項目常規設置)

$ npm init

而後繼續運行如下命令，依次下載Gulp及咱們項目所需的依賴插件。

$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-autoprefixer
$ npm install --save-dev gulp-minify-css
$ npm install --save-dev gulp-rename
$ npm install --save-dev gulp-sass

在項目根目錄下創建一個gulpfile.js文件做爲Gulp任務程序，並按以下創建文件夾結構，dist的子目錄不須要創建，在運行Gulp的時候會自動生成。

到此咱們的項目結構會以下所示：

.
|—dist/
|-node_modules/
|—src/
| |—scss/
| |—master.scss
| |—_base.scss
|
|—js/
| |-intro.js
| |-body.js
| |-others.js
| |-end.js
|
|-package.json
|-gulpfile.js

而後咱們來創建第一個默認任務吧，在gulpfile.js裏輸入如下代碼：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

在終端裏運行$ gulp命令，默認名爲default的任務將會被運行。但此時默認任務沒有任何工做。

scss編譯任務

下面咱們添加一個scss編譯任務，主要完成scss文件編譯成css文件並進行多瀏覽器支持修正最後還要生成一個壓縮版本的css文件。繼續在gulpfile.js裏添加以下代碼：

gulp.task('sass', function() {
    gulp.src('./src/scss/**/*.scss') //匹配文件
    .pipe(sass({                       //sass模塊編譯
        outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer({               //進行瀏覽器兼容
        browsers: ['last 10 versions']
    }))
    .pipe(gulp.dest('./dist/css'))     //輸出一份到dist/css目錄
    .pipe(minifycss())                 //繼續壓縮一份
    .pipe(rename("public.min.css"))    //重命名避免覆蓋上一次的輸出
    .pipe(gulp.dest('./dist/css'));    //輸出壓縮好的新css文件
});

在終端運行$ gulp sass，將會執行名稱爲sass的任務，會自動完成咱們上面所說的功能。

js打包任務

咱們繼續添加一個自動合併js文件並壓縮的任務，繼續在gulpfile.js裏添加以下代碼：

gulp.task('scripts', function() {
    gulp.src([
        './src/js/intro.js',
        './src/js/body.js',
        './src/js/end.js'
    ])
    .pipe(concat('app.js'))         // 合併爲一個文件
    .pipe(gulp.dest('./dist/js'))   // 寫入一份到指定目錄
    .pipe(uglify())                 // 壓縮一份
    .pipe(rename("buldle.min.js"))  // 並重命名以防覆蓋上次寫入的文件
    .pipe(gulp.dest('./dist/js'));  // 寫入到指定目錄
});

在終端運行$ gulp scripts，將會執行名稱爲scripts的任務，會自動完成咱們上面所說的功能。

監視自動化處理

下面咱們來修改默認任務，讓每當執行默認任務的時候，自動執行sass與scripts這兩個任務，修改default任務代碼以下：

gulp.task('default', ['sass', 'scripts']);

這樣，在終端運行$ gulp的時候，就會自動運行sass與scripts這兩個任務了。

但每次修改如下scss文件或者js文件都要去運行一次$ gulp命令豈不是很麻煩，這裏咱們就要用到gulp的gulp.watch接口來自動監視文件的變化並運行指定的任務，這樣咱們就不要手動的去運行命令了。繼續添加如下代碼：

gulp.task('watcher', function() {
    gulp.watch("src/scss/**/*.scss", ['sass']);
    gulp.watch("src/js/*.js", ['scripts']);
});

這裏咱們添加了一個名爲watcher的任務，當在終端運行$gulp watcher命令後，Gulp將會自動監視咱們匹配文件的變化，每當文件改變了就會自動運行指定的任務。

到此，咱們這個項目的Gulp配置都完成了，每當咱們須要進行項目開發的時候，只須要在終端執行$ gulp watcher後，Gulp就會自動在後臺監視運行了，咱們只須要好好寫代碼，其餘的編譯任務將會自動運行了。

項目代碼下載：gulp-project

其餘文獻：

https://github.com/gulpjs/gulp/blob/master/docs/API.md (官方接口API文檔)
https://github.com/gulpjs/gulp/tree/master/docs/recipes (不少演示項目代碼)
https://github.com/gulpjs/gulp/blob/master/docs/README.md#articles (其它Gulp教程文章)