久久久色情播放,操逼视频91在线看,久久成人欧美亚洲天堂

[轉(zhuǎn)載]（https://github.com/zhonglimh/Gulp）

Gulp構(gòu)建前端自動(dòng)化工作流

Gulp構(gòu)建前端自動(dòng)化工作流之：常用插件介紹及使用

在對(duì)Gulp有了一個(gè)初步的了解之后，我們開(kāi)始構(gòu)建一個(gè)較為完整的Gulp開(kāi)發(fā)環(huán)境。

本文主要分為6個(gè)段落：

1. 構(gòu)建項(xiàng)目目錄結(jié)構(gòu)（Directory Structure Build）
2. 插件介紹及使用方法（Tasks and dependencies）
3. 擴(kuò)展優(yōu)化（Extend & Optimize Task）
4. 其他插件介紹（Other plug-ins）
5. 匹配規(guī)則（Match Files）
6. 注意事項(xiàng)（Attention）

關(guān)于Gulp的入門(mén)介紹及安裝方法，可先去《Gulp構(gòu)建前端自動(dòng)化工作流之：入門(mén)介紹及LiveReload的使用》這篇文章查看。對(duì)其有個(gè)初步認(rèn)識(shí)后，便于后文的理解。

1. 構(gòu)建項(xiàng)目目錄結(jié)構(gòu)（Directory Structure Build）

+ my-gulp（項(xiàng)目文件夾）
  + node_modules Gulp組件目錄
  + dist 發(fā)布環(huán)境
  + css 編譯后的CSS文件
    ─ etc...
  + images 壓縮后的圖片文件
    ─ etc...
  + js 編譯后的JS文件
    ─ etc...
　　─ html 靜態(tài)文件
  + src 開(kāi)發(fā)環(huán)境
  + sass SASS文件
    ─ etc...
  + images 圖片文件
    ─ etc...
  + js JS文件
    ─ etc...
  ─ html 靜態(tài)文件
  ─ gulpfile.js Gulp任務(wù)文件

注：
+ 表示目錄  ─ 表示文件

2. 插件介紹及使用方法（Tasks and dependencies）

2.1 HTML處理（HTML Task）

僅把開(kāi)發(fā)環(huán)境中的HTML文件，移動(dòng)至發(fā)布環(huán)境。

基礎(chǔ)配置：

gulp.task('html', function() {
  return gulp.src('src/**/*.html') // 指明源文件路徑、并進(jìn)行文件匹配
    .pipe('dist'); // 輸出路徑
});

執(zhí)行命令：
gulp html

2.2 樣式處理（CSS Task）

CSS預(yù)處理/Sass編譯 (gulp-ruby-sass) ：

相比較glup-sass而言，速度會(huì)稍許慢點(diǎn)，但功能更多并且穩(wěn)定。

安裝SASS：

像Gulp基于Node.js一樣，Sass基于Ruby環(huán)境，所以我們先去官網(wǎng)下載并安裝Ruby（在安裝的時(shí)候，請(qǐng)勾選Add Ruby executables to your PATH這個(gè)選項(xiàng)，添加環(huán)境變量，不然以后使用編譯軟件的時(shí)候會(huì)提示找不到ruby環(huán)境）。
安裝完ruby之后，在開(kāi)始菜單中，找到剛才我們安裝的ruby，打開(kāi)Start Command Prompt with Ruby
然后直接在命令行中輸入gem install sass按回車(chē)鍵確認(rèn)，等待一段時(shí)間就會(huì)提示你sass安裝成功。

注：
由于近期墻的比較嚴(yán)重，外加（上海）電信限制了外網(wǎng)訪(fǎng)問(wèn)速度。如果安裝失敗，請(qǐng)使用淘寶的Ruby鏡像。具體操作方法請(qǐng)參考淘寶RubyGems鏡像安裝 sass。

安裝命令：
npm install gulp-ruby-sass --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var sass = require('gulp-ruby-sass'); // sass/scss編譯

gulp.task('sass', function () {
     return sass('src/css', { style: 'compressed' }) // 指明源文件路徑、并進(jìn)行文件匹配（style: 'compressed' 表示輸出格式）
          .on('error', function (err) {
               console.error('Error!', err.message); // 顯示錯(cuò)誤信息
          })
          .pipe(gulp.dest('dist/css')); // 輸出路徑
});

執(zhí)行命令：
gulp sass

插件提供4種輸出格式：
nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
expanded：沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼。
compact：簡(jiǎn)潔格式的css代碼。
compressed：壓縮后的css代碼。

注：
使用前清看清 gulp-ruby-sass 寫(xiě)法，不要直接拿 gulp-sass 的寫(xiě)法來(lái)套用，兩者并不完全相同。

2.3 腳本壓縮&重命名（Javascript Task）

JS文件壓縮(gulp-uglify)：

使用uglify引擎壓縮JS文件。

安裝命令：
npm install gulp-uglify --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var uglify = require('gulp-uglify'); // js壓縮

gulp.task('script', function() {
  return gulp.src('src/js/*.js') // 指明源文件路徑、并進(jìn)行文件匹配
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify進(jìn)行壓縮，并保留部分注釋
    .pipe(gulp.dest('dist/js')); // 輸出路徑
});

執(zhí)行命令：
gulp script

2.4 圖片處理（Image Task）

圖片壓縮(gulp-imagemin) + 深度壓縮(imagemin-pngquant)：

壓縮PNG、JPEG、GIF和SVG圖像。
gulp-imagemin集成了gifsicle 、jpegtran 、optipng 、svgo 這4個(gè)插件。而imagemin-pngquant是imagemin插件的一個(gè)擴(kuò)展插件，用于深度壓縮圖片。

安裝命令：
npm install gulp-imagemin imagemin-pngquant --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var imagemin = require('gulp-imagemin'), // 圖片壓縮
  pngquant = require('imagemin-pngquant'); // 深度壓縮

gulp.task('images', function(){
  return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進(jìn)行文件匹配
    .pipe(imagemin({
      progressive: true, // 無(wú)損壓縮JPG圖片
      svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
      use: [pngquant()] // 使用pngquant插件進(jìn)行深度壓縮
    }))
    .pipe(gulp.dest('dist/images')); // 輸出路徑
});

執(zhí)行命令：
gulp images

注：
一般我們所使用的圖片壓縮方法，都會(huì)對(duì)圖像造成一定的損失，這個(gè)和壓縮比率有一定的關(guān)系。通常我們所說(shuō)的無(wú)損壓縮，也只是控制在我們?nèi)庋垭y以發(fā)現(xiàn)的范圍內(nèi)。換句話(huà)來(lái)說(shuō)，在你保存切圖的同時(shí)，其實(shí)已經(jīng)對(duì)圖像造成了一定的損失，因?yàn)闆](méi)什么人會(huì)選擇100%最佳質(zhì)量導(dǎo)出圖片。兩者是差不多的概念。

2.5 自動(dòng)刷新（LiveReload Task）

網(wǎng)頁(yè)自動(dòng)刷新（文件變動(dòng)后即時(shí)刷新頁(yè)面）(gulp-livereload) + 靜態(tài)服務(wù)器：(gulp-webserver)：

安裝命令：
npm install gulp-livereload gulp-webserver --save-dev

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var livereload = require('gulp-livereload'), // 網(wǎng)頁(yè)自動(dòng)刷新（文件變動(dòng)后即時(shí)刷新頁(yè)面）
  webserver = require('gulp-webserver'); // 本地服務(wù)器

// 注冊(cè)任務(wù)
gulp.task('webserver', function() {
  gulp.src( '.' ) // 服務(wù)器目錄（.代表根目錄）
  .pipe(webserver({ // 運(yùn)行g(shù)ulp-webserver
    livereload: true, // 啟用LiveReload
    open: true // 服務(wù)器啟動(dòng)時(shí)自動(dòng)打開(kāi)網(wǎng)頁(yè)
  }));
});

// 監(jiān)聽(tīng)任務(wù)
gulp.task('watch',function(){
  // 監(jiān)聽(tīng) html
  gulp.watch('src/**/*.html', ['html'])
  // 監(jiān)聽(tīng) scss
  gulp.watch('src/scss/*.scss', ['css']);
  // 監(jiān)聽(tīng) images
  gulp.watch('src/images/**/*.{png,jpg,gif,svg}', ['images']);
  // 監(jiān)聽(tīng) js
  gulp.watch('src/js/*.js', ['script']);
});
 
// 默認(rèn)任務(wù)
gulp.task('default',['webserver','watch']);

執(zhí)行命令：
gulp

3. 擴(kuò)展優(yōu)化（Extend & Optimize Task）

至此，一套簡(jiǎn)單的前端自動(dòng)化工作流/Gulp工作流便已經(jīng)完成?，F(xiàn)在，我們開(kāi)始優(yōu)化并擴(kuò)展這些插件，使我們的工作流更為"智能"。

3.1 文件重命名(gulp-rename)：

像jQuery一樣，通常為了表示該文件是壓縮版，會(huì)在文件名后加上 .min 后綴。

安裝命令：
npm install gulp-rename --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var uglify = require('gulp-uglify'), // js壓縮
  rename = require('gulp-rename'); // 文件重命名

gulp.task('script', function() {
  return gulp.src('src/js/*.js') // 指明源文件路徑、并進(jìn)行文件匹配
    .pipe(rename({ suffix: '.min' })) // 重命名
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify進(jìn)行壓縮，并保留部分注釋
    .pipe(gulp.dest('dist/js')); // 輸出路徑
});

執(zhí)行命令：
gulp script

3.2 來(lái)源地圖(gulp-sourcemaps)：

這是個(gè)非常有用的插件，我們?cè)趬嚎s、合并等操作之后，調(diào)試時(shí)所看到的內(nèi)容，都是編譯后的代碼。這樣就導(dǎo)致一個(gè)問(wèn)題，調(diào)試過(guò)程中無(wú)法和源碼（編譯時(shí)的代碼）位置相對(duì)應(yīng)，讓調(diào)試變的十分困難。
例如：一個(gè)jQuery，源碼接近1萬(wàn)行。但壓縮后只有短短的3~4行，并且變量名稱(chēng)也已發(fā)生改變。此時(shí)一旦報(bào)錯(cuò)，你很難從錯(cuò)誤信息中直接找到對(duì)應(yīng)代碼的原始位置。同樣，CSS也會(huì)遇到類(lèi)似問(wèn)題。
而sourcemaps作用，便是成一個(gè).map文件，里面儲(chǔ)存著對(duì)應(yīng)的源碼位置。并內(nèi)嵌在你轉(zhuǎn)換后的文件底部/*# sourceMappingURL=maps/filename.css.map */。這樣在我們調(diào)試時(shí)，就會(huì)直接顯示（映射）源碼，而不時(shí)編譯后的代碼。

安裝命令：
npm install gulp-sourcemaps --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var uglify = require('gulp-uglify'), // js壓縮
  rename = require('gulp-rename'), // 文件重命名
  sourcemaps = require('gulp-sourcemaps'); // 來(lái)源地圖

gulp.task('script', function() {
  return gulp.src(['src/js/*.js','!*.min.js']) // 指明源文件路徑、并進(jìn)行文件匹配，排除 .min.js 后綴的文件
    .pipe(sourcemaps.init()) // 執(zhí)行sourcemaps
    .pipe(rename({ suffix: '.min' })) // 重命名
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify進(jìn)行壓縮，并保留部分注釋
    .pipe(sourcemaps.write('maps')) // 地圖輸出路徑（存放位置）
    .pipe(gulp.dest('dist/js')); // 輸出路徑
});

執(zhí)行命令：
gulp script

3.3 只操作有過(guò)修改的文件(gulp-changed)：

比如我們有20個(gè)文件，當(dāng)你修改其中1個(gè)文件時(shí)，由于任務(wù)的局限性，也會(huì)把其余19匹配的無(wú)辜的同類(lèi)給一并進(jìn)行處理，這樣就大大降低了效率。而 gulp-changed 插件，會(huì)首先把文件進(jìn)行比對(duì)，如果文件沒(méi)有改動(dòng)，則跳過(guò)后續(xù)任務(wù)。

安裝命令：
npm install gulp-changed --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var imagemin = require('gulp-imagemin'), // 圖片壓縮
  pngquant = require('imagemin-pngquant'), // 深度壓縮
  changed = require('gulp-changed'); // 只操作有過(guò)修改的文件

gulp.task('images', function(){
  return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進(jìn)行文件匹配
    .pipe(changed('dist/images')) // 對(duì)比文件是否有過(guò)改動(dòng)（此處填寫(xiě)的路徑和輸出路徑保持一致）
    .pipe(imagemin({
      progressive: true, // 無(wú)損壓縮JPG圖片
      svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
      use: [pngquant()] // 使用pngquant插件進(jìn)行深度壓縮
    }))
    .pipe(gulp.dest('dist/images')); // 輸出路徑
});

執(zhí)行命令：
gulp images

此時(shí)我們?cè)偃?dist/images 文件夾，查看每個(gè)圖片的最后修改日期，你就會(huì)發(fā)現(xiàn)只針對(duì)你剛才修改過(guò)的圖片（文件）行了處理，而那些之前已經(jīng)處理過(guò)的圖片則沒(méi)有再進(jìn)行操作。

注：
無(wú)論是 gulp-changed 還是下文中提到的 gulp-cache ，對(duì) sass 文件無(wú)效，始終會(huì)對(duì)所有匹配文件進(jìn)行操作。

3.4 文件合并(gulp-concat)：

比如我們有多個(gè)JS庫(kù)，jquery.min.js、bootstrap.min.js、angular.min.js。此時(shí)可以通過(guò)合并，減少網(wǎng)絡(luò)請(qǐng)求。

安裝命令：
npm install gulp-concat --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var concat = require("gulp-concat"); // 文件合并
 
gulp.task('concat', function () {
    gulp.src('js/*.min.js')  // 要合并的文件
    .pipe(concat('libs.js'))  // 合并成libs.js
    .pipe(gulp.dest('dist/js'));
});

執(zhí)行命令：
gulp concat

3.5 文件清理(gulp-clean)：

簡(jiǎn)單的說(shuō)，就是一鍵刪除（清理）文件。就拿為了調(diào)試所生成的 .map 文件為例，在正式發(fā)布時(shí)并不需要，此時(shí)我們就能通過(guò) clean任務(wù)進(jìn)行清理。

安裝命令：
npm install gulp-clean --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var clean = require('gulp-clean'); // 文件清理

gulp.task('clean', function() {
  return gulp.src(['dist/css/maps','dist/js/maps'], {read: false})
    .pipe(clean());
});

執(zhí)行命令：
gulp clean

4. 其他插件介紹（Other plug-ins）

這部分插件作為擴(kuò)展閱讀，只做簡(jiǎn)單介紹。每個(gè)插件都有每個(gè)插件的特性，根據(jù)你的喜好和實(shí)際操作環(huán)境而定，蘿卜青菜各有所愛(ài)。用的人最多的，不代表就是適合你的。總之，有時(shí)間有精力的，可以多試試，多玩玩，多配配，這里也只是冰山一角。

4.1 CSS類(lèi)

1. CSS壓縮 (gulp-minify-css)

安裝命令：
npm install gulp-minify-css --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var minifyCss = require('gulp-minify-css'); // CSS壓縮

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

執(zhí)行命令：
gulp minify-css

2. CSS預(yù)處理/Less編譯 (gulp-less)

安裝命令：
npm install gulp-autoprefixer --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var less = require('gulp-less'); // LESS編譯

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

執(zhí)行命令：
gulp less

3. 自動(dòng)添加CSS3瀏覽器前綴(gulp-autoprefixer):

-prefix-free 大家肯定都比較熟，會(huì)自動(dòng)為CSS添加上瀏覽器的前綴，幫你擺脫前綴痛苦。而 gulp-autoprefixer 插件同樣如此。

安裝命令：
npm install gulp-autoprefixer --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var autoprefixer = require('gulp-autoprefixer'); // 自動(dòng)添加CSS3瀏覽器前綴

gulp.task('prefix', function () {
    gulp.src('src/css/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var sass = require('gulp-ruby-sass'), // sass/scss編譯
  autoprefixer = require('gulp-autoprefixer'); // 自動(dòng)添加CSS3瀏覽器前綴

gulp.task('sass', function () {
  return sass('src/css', { style: 'compressed' }) // 指明源文件路徑、并進(jìn)行文件匹配
    .on('error', function (err) {
      console.error('Error!', err.message); // 顯示錯(cuò)誤信息
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions'], // 主流瀏覽器的最新兩個(gè)版本
      cascade: false // 是否美化屬性值
    }))
    .pipe(gulp.dest('dist/css')); // 輸出路徑
});

執(zhí)行命令：
gulp sass

4.2 圖像類(lèi)

1. 使用TinyPN API壓縮圖片(gulp-tinypng)：

使用TinyPNG官方API進(jìn)行圖片壓縮。我個(gè)人比較喜歡這個(gè)，因?yàn)橹耙恢庇性谑褂?。但由于TinyPNG服務(wù)器在國(guó)外，有時(shí)執(zhí)行起來(lái)會(huì)很慢，除非你有VPN，所以在這只做簡(jiǎn)單介紹。
經(jīng)過(guò)我的測(cè)試，gulp-tinypng壓縮后的圖片大小，相當(dāng)于使用imagemin-pngquant深度壓縮后的大小。使用時(shí)需先注冊(cè)TinyPNG賬戶(hù)，獲你的API KEY。免費(fèi)版每個(gè)月可以壓縮500張圖片，對(duì)于一般項(xiàng)目而言已經(jīng)足夠。

安裝命令：
npm install gulp-tinypng --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var tinypng = require('gulp-tinypng'); // 使用TinyPN API壓縮圖片

gulp.task('tinypng', function(){
    return gulp.src('src/images/**/*') // 源地址
     .pipe(tinypng('填寫(xiě)TinyPN API KEY'))
    .pipe(gulp.dest('dist/images')); // 輸出路徑
});

執(zhí)行命令：
gulp tinypng

4.3 其他

1. 緩存代理(gulp-cache)：

緩存操作過(guò)的文件，當(dāng)文件修改時(shí)，只編譯當(dāng)前修改的文件。其余文件直接從緩存中調(diào)取，提高效率。
缺點(diǎn)：因?yàn)槭蔷彺?，所以如果文件被刪除，但沒(méi)及時(shí)清理緩存文件時(shí)，就會(huì)導(dǎo)致被刪除的文件又從緩存中讀取了出來(lái)，所謂成也蕭何敗也蕭何。

安裝命令：
npm install gulp-cache --save-dev

基礎(chǔ)配置：

var gulp = require('gulp'); // 基礎(chǔ)庫(kù)
var imagemin = require('gulp-imagemin'), // 圖片壓縮
  pngquant = require('imagemin-pngquant'), // 深度壓縮
  pngquant = require('imagemin-cache'), // 緩存代理
  clean = require('imagemin-clean'); // 文件清理

// imagemin 圖片壓縮（利用cache）
gulp.task('images', function(){
  return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路徑、并進(jìn)行文件匹配
    .pipe(cache(imagemin({
      progressive: true, // 無(wú)損壓縮JPG圖片
      svgoPlugins: [{removeViewBox: false}], // 不要移除svg的viewbox屬性
      use: [pngquant()] // 使用pngquant插件進(jìn)行深度壓縮
    })))
    .pipe(gulp.dest('dist/images')); // 輸出路徑
});
// 清理緩存文件
gulp.task('clean', function (done) {
  return cache.clearAll(done);
});

5. 匹配規(guī)則（Match Files）

Gulp使用 node-glob 模塊，借助 minimatch 庫(kù)，將glob表達(dá)式(glob expressions)轉(zhuǎn)換成JavaScript正則表達(dá)式(JavaScript RegExp) ，從而實(shí)現(xiàn)文件匹配功能。我們所看到的**和*都是其所提供的語(yǔ)法：
* 匹配文件路徑中的0個(gè)或多個(gè)字符，但不會(huì)匹配路徑分隔符，除非路徑分隔符出現(xiàn)在末尾。
** 匹配路徑中的0個(gè)或多個(gè)目錄及其子目錄，需要單獨(dú)出現(xiàn)，即它左右不能有其他東西了。如果出現(xiàn)在末尾，也能匹配文件。
? 匹配文件路徑中的一個(gè)字符(不會(huì)匹配路徑分隔符)。
[...] 匹配方括號(hào)中出現(xiàn)的字符中的任意一個(gè)，當(dāng)方括號(hào)中第一個(gè)字符為^或!時(shí)，則表示不匹配方括號(hào)中出現(xiàn)的其他字符中的任意一個(gè)。
!(pattern|pattern|pattern) 匹配任何與括號(hào)中給定的任一參數(shù)一致的都不匹配的。
?(pattern|pattern|pattern) 匹配括號(hào)中給定的任一參數(shù)0次或1次。
+(pattern|pattern|pattern) 匹配括號(hào)中給定的任一參數(shù)至少1次。
*(a|b|c) 匹配括號(hào)中給定的任一參數(shù)0次或多次。
@(pattern|pat*|pat?erN) 匹配括號(hào)中給定的任一參數(shù)1次。

用實(shí)例來(lái)加深理解：
* 能匹配 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，能用來(lái)匹配所有的目錄和文件
**/*.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，因?yàn)橹挥袉?code>**單獨(dú)出現(xiàn)才能匹配多級(jí)目錄
?.js 能匹配 a.js , b.js , c.js
a?? 能匹配 a.b , abc，但不能匹配 ab/，因?yàn)樗粫?huì)匹配路徑分隔符
[xyz].js 只能匹配 x.js , y.js , z.js，不會(huì)匹配 xy.js , xyz.js 等，整個(gè)中括號(hào)只代表一個(gè)字符
[^xyz].js 能匹配 a.js , b.js , c.js等，不能匹配 x.js , y.js , z.js

當(dāng)有多種匹配模式時(shí)可以使用數(shù)組：

// 使用數(shù)組的方式來(lái)匹配多種文件
gulp.src(['js/*.min.js','css/*.min.css'])

使用數(shù)組的方式還有一個(gè)好處就是可以很方便的使用排除模式，在數(shù)組中的單個(gè)匹配模式前加上!即是排除模式，它會(huì)在匹配的結(jié)果中排除這個(gè)匹配，要注意一點(diǎn)的是不能在數(shù)組中的第一個(gè)元素中使用排除模式：

// 使用數(shù)組的方式來(lái)匹配多種文件
gulp.src(['*.js','!b*.js']) // 匹配所有js文件，但排除掉以b開(kāi)頭的js文件
gulp.src(['!b*.js',*.js]) // 不會(huì)排除任何文件，因?yàn)榕懦Ｊ讲荒艹霈F(xiàn)在數(shù)組的第一個(gè)元素中

此外，還可以使用展開(kāi)模式。展開(kāi)模式以花括號(hào)作為定界符，根據(jù)它里面的內(nèi)容，會(huì)展開(kāi)為多個(gè)模式，最后匹配的結(jié)果為所有展開(kāi)的模式相加起來(lái)得到的結(jié)果。展開(kāi)的例子如下：
a{b,c}d 會(huì)展開(kāi)為 abd,acd
a{b,}c 會(huì)展開(kāi)為 abc,ac
a{0..3}d 會(huì)展開(kāi)為 a0d,a1d,a2d,a3d
a{b,c{d,e}f}g 會(huì)展開(kāi)為 abg,acdfg,acefg
a{b,c}d{e,f}g 會(huì)展開(kāi)為 abdeg,acdeg,abdeg,abdfg

6. 注意事項(xiàng)（Attention）

watch 的時(shí)候路徑不要用 './path'，直接使用 '/path' 即可，不然會(huì)導(dǎo)致新增文件無(wú)法被 watch。
gulp 對(duì)于 one after one 的任務(wù)鏈，需要加 return，比如 gulp clean

參考資料：
An introduction to Gulp
gulp API 介紹

擴(kuò)展資料：
Gulp API docs
gulp-cheatsheet

原文地址：
Gulp構(gòu)建前端自動(dòng)化工作流之：常用插件介紹及使用

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

gulp入門(mén)2

gulp入門(mén)2

Gulp構(gòu)建前端自動(dòng)化工作流

Gulp構(gòu)建前端自動(dòng)化工作流之：常用插件介紹及使用

1. 構(gòu)建項(xiàng)目目錄結(jié)構(gòu)（Directory Structure Build）

2. 插件介紹及使用方法（Tasks and dependencies）

2.1 HTML處理（HTML Task）

2.2 樣式處理（CSS Task）

CSS預(yù)處理/Sass編譯 (gulp-ruby-sass) ：

2.3 腳本壓縮&重命名（Javascript Task）

JS文件壓縮(gulp-uglify)：

2.4 圖片處理（Image Task）

圖片壓縮(gulp-imagemin) + 深度壓縮(imagemin-pngquant)：

2.5 自動(dòng)刷新（LiveReload Task）

網(wǎng)頁(yè)自動(dòng)刷新（文件變動(dòng)后即時(shí)刷新頁(yè)面）(gulp-livereload) + 靜態(tài)服務(wù)器：(gulp-webserver)：

3. 擴(kuò)展優(yōu)化（Extend & Optimize Task）

3.1 文件重命名(gulp-rename)：

3.2 來(lái)源地圖(gulp-sourcemaps)：

3.3 只操作有過(guò)修改的文件(gulp-changed)：

3.4 文件合并(gulp-concat)：

3.5 文件清理(gulp-clean)：

4. 其他插件介紹（Other plug-ins）

4.1 CSS類(lèi)

1. CSS壓縮 (gulp-minify-css)

2. CSS預(yù)處理/Less編譯 (gulp-less)

3. 自動(dòng)添加CSS3瀏覽器前綴(gulp-autoprefixer):

4.2 圖像類(lèi)

1. 使用TinyPN API壓縮圖片(gulp-tinypng)：

4.3 其他

1. 緩存代理(gulp-cache)：

5. 匹配規(guī)則（Match Files）

6. 注意事項(xiàng)（Attention）

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

gulp入門(mén)2

Gulp構(gòu)建前端自動(dòng)化工作流

Gulp構(gòu)建前端自動(dòng)化工作流之：常用插件介紹及使用

1. 構(gòu)建項(xiàng)目目錄結(jié)構(gòu)（Directory Structure Build）

2. 插件介紹及使用方法（Tasks and dependencies）

2.1 HTML處理（HTML Task）

2.2 樣式處理（CSS Task）

CSS預(yù)處理/Sass編譯 (gulp-ruby-sass) ：

2.3 腳本壓縮&重命名（Javascript Task）

JS文件壓縮(gulp-uglify)：

2.4 圖片處理（Image Task）

圖片壓縮(gulp-imagemin) + 深度壓縮(imagemin-pngquant)：

2.5 自動(dòng)刷新（LiveReload Task）

網(wǎng)頁(yè)自動(dòng)刷新（文件變動(dòng)后即時(shí)刷新頁(yè)面）(gulp-livereload) + 靜態(tài)服務(wù)器：(gulp-webserver)：

3. 擴(kuò)展優(yōu)化（Extend & Optimize Task）

3.1 文件重命名(gulp-rename)：

3.2 來(lái)源地圖(gulp-sourcemaps)：

3.3 只操作有過(guò)修改的文件(gulp-changed)：

3.4 文件合并(gulp-concat)：

3.5 文件清理(gulp-clean)：

4. 其他插件介紹（Other plug-ins）

4.1 CSS類(lèi)

1. CSS壓縮 (gulp-minify-css)

2. CSS預(yù)處理/Less編譯 (gulp-less)

3. 自動(dòng)添加CSS3瀏覽器前綴(gulp-autoprefixer):

4.2 圖像類(lèi)

1. 使用TinyPN API壓縮圖片(gulp-tinypng)：

4.3 其他

1. 緩存代理(gulp-cache)：

5. 匹配規(guī)則（Match Files）

6. 注意事項(xiàng)（Attention）

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av