Gulp快速入門教程

Gulp是基於流的前端自動化的構建工具，雖然說現在是webpack盛行的時代，可是gulp和webpack整合效果更美味的，魚與熊掌均可兼得哦！本文只介紹下Gulp的基本使用和一些經常使用的Gulp插件，廢話很少說，一塊兒來看看吧。

gulp

安裝Gulp

Gulp是依賴Node的，這裏假設你已經安裝好了Node，首先咱們全局安裝一下Gulp：

npm install -g gulp

全局安裝完成後，咱們再切換到項目的要目錄下，執行：

//- 生成一個 package.json，裏面是一些常規的配置信息
npm init

//- 局部安裝 Gulp，並生成包依賴信息於 package.json 內的 devDependencies
npm install gulp --save-dev

安裝Gulp插件

Gulp的任務都是以插件的形式存在的，因此在使用前，須要先安裝咱們用到的插件到項目目錄內，插件的安裝命令：

// 多個插件能夠用空格分隔
npm install 插件名 --save-dev

Gulp經常使用插件

• gulp-rename：重命名文件
• gulp-concat：合併文件
• gulp-filter：過濾文件
• gulp-uglify：壓縮Js
• gulp-csso：壓縮優化CSS
• gulp-html-minify：壓縮HTML
• gulp-imagemin：壓縮圖片
• gulp-zip：zip壓縮文件
• gulp-autoprefixer：自動爲css添加瀏覽器前綴
• gulp-rev：給靜態資源文件名添加hash值 unicorn.css => unicorn-d41d8cd98f.css
• gulp-sass：編譯sass
• gulp-babel：將ES6代碼編譯成ES5

配置Gulp

咱們須要在根目錄下建立一個gulpfile.js文件來配置Gulp，將全部的插件加載進來，文件名必需要是gulpfile.js，不然不管執行，下面是一個gulpfile的示例：

var gulp    = require('gulp');
var gutil   = require('gulp-util');
var uglify  = require('gulp-uglify');
var concat  = require('gulp-concat');

// 經過 require() 載入咱們須要用到的插件~ 

gulp.task('concat', function () {
    gulp.src('./scripts/*.js')
        .pipe(uglify())
        .pipe(concat('jkd.min.js'))
        .pipe(gulp.dest('./build/js'));
});

gulp.task('default', ['concat']);

運行Gulp

配置好gulpfile.js文件後，咱們就能夠運行Gulp進行相關的任務了，使用Gulp命令操做：

// 運行默認的 default task
gulp

// 僅運行 concat 這一個 task
gulp concat

// 運行結果以下：
D:\SVN\wap\m>gulp
[12:03:13] Using gulpfile D:\SVN\wap\m\gulpfile.js
[12:03:13] Starting 'concat'...
[12:03:13] Finished 'concat' after 9.1 ms
[12:03:13] Starting 'default'...
[12:03:13] Finished 'default' after 11 μs

D:\SVN\wap\m>gulp concat
[12:03:25] Using gulpfile D:\SVN\wap\m\gulpfile.js
[12:03:25] Starting 'concat'...
[12:03:25] Finished 'concat' after 9.54 ms

Gulp API

// 定義一個 task,聲明它的名稱, 任務依賴, 和任務內容.
gulp.task(name[, deps], fn)

// 讀取文件,參數爲文件路徑字符串或數組, 支持通配符.
gulp.src(globs[, options])

// 寫入文件, 做爲pipe的一個流程.文件夾不存在時會被自動建立.
gulp.dest(path[, options])

// 監控文件,執行任務.
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

Gulp詳細API的說明能夠查看gulp API docs

最後，附上原文地址：http://www.zcbboke.com/1705.html