gulp對css、js、img的壓縮和css圖片的base64__js

在學習前，先談談大致使用gulp的步驟，給讀者以初步的認識。首先當然是安裝nodejs，通過nodejs的npm全域安裝和項目安裝gulp，其次在項目裡安裝所需要的gulp外掛程式，然後建立gulp的設定檔gulpfile.js並寫好配置資訊（定義gulp任務），最後通過命令提示字元運行gulp任務即可。

安裝nodejs -> 全域安裝gulp -> 項目安裝gulp以及gulp外掛程式 -> 配置gulpfile.js -> 運行任務 1、安裝nodejs

1.1、說明：gulp是基於nodejs，理所當然需要安裝nodejs；

1.2、安裝：開啟nodejs官網，點擊碩大的綠色Download按鈕，它會根據系統資訊選擇對應版本（.msi檔案）。然後像安裝QQ一樣安裝它就可以了（安裝路徑隨意）。

2、使用命令列（如果你熟悉命令列，可以直接跳到第3步）

2.1、說明：什麼是命令列。命令列在OSX是終端（Terminal），在windows是命令提示字元（Command Prompt）；

2.2、註：之後操作都是在windows系統下；

2.3、簡單介紹gulp在使用過程中常用命令，開啟命令提示字元執行下列命令（開啟檔案：window + r 輸入cmd斷行符號）：

node -v查看安裝的nodejs版本，出現版本號碼，說明剛剛已正確安裝nodejs。PS：未能出現版本號碼，請嘗試登出電腦重試；

npm -v查看npm的版本號碼，npm是在安裝nodejs時一同安裝的nodejs包管理器，那它有什麼用呢。稍後解釋；

cd定位到目錄，用法：cd + 路徑 ；

dir列出檔案清單；

cls清空命令提示字元視窗內容。

3、npm介紹

3.1、說明：npm（node package manager）nodejs的包管理器，用於node外掛程式管理（包括安裝、卸載、管理依賴等）；

3.2、使用npm安裝外掛程式：命令提示字元執行npm install <name> [-g] [--save-dev]；

3.2.1、<name>：node外掛程式名稱。例：npm install gulp-less --save-dev

3.2.2、-g：全域安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm，並且寫入系統內容變數；  非全域安裝：將會安裝在當前定位目錄；  全域安裝可以通過命令列在任何地方調用它，本地安裝將安裝在定位目錄的node_modules檔案夾下，通過require()調用；

3.2.3、--save：將儲存配置資訊至package.json（package.json是nodejs項目設定檔）；

3.2.4、-dev：儲存至package.json的devDependencies節點，不指定-dev將儲存至dependencies節點；一般儲存在dependencies的像這些express/ejs/body-parser等等。

3.2.5、為什麼要儲存至package.json。因為node外掛程式包相對來說非常龐大，所以不加入版本管理，將配置資訊寫入package.json並將其加入版本管理，其他開發人員對應下載即可（命令提示字元執行npm install，則會根據package.json下載所有需要的包，

npm install --production只下載dependencies節點的包）。

3.3、使用npm卸載外掛程式：npm uninstall <name> [-g] [--save-dev]  PS：不要直接刪除本地外掛程式包

3.3.1、刪除全部外掛程式：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻煩

3.3.2、藉助rimraf：npm install rimraf -g 用法：rimraf node_modules

3.4、使用npm更新外掛程式：npm update <name> [-g] [--save-dev]

3.4.1、更新全部外掛程式：npm update [--save-dev]

3.5、查看npm協助：npm help

3.6、目前的目錄已安裝外掛程式：npm list

PS：npm安裝外掛程式過程：從http://registry.npmjs.org下載對應的外掛程式包（該網站伺服器位於國外，所以經常下載緩慢或出現異常），解決辦法往下看↓↓↓↓↓↓。

4、選裝cnpm

4.1、說明：因為npm安裝外掛程式是從國外伺服器下載，受網路影響大，可能出現異常，如果npm的伺服器在中國就好了，所以我們樂於分享的淘寶團隊幹了這事。來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(唯讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。”；

4.2、官方網址：http://npm.taobao.org；

4.3、安裝：命令提示字元執行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安裝完後最好查看其版本號碼cnpm -v或關閉命令提示字元重新開啟，安裝完直接使用有可能會出現錯誤；

註：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm代替npm）。

5、全域安裝gulp

5.1、說明：全域安裝gulp目的是為了通過她執行gulp任務；

5.2、安裝：命令提示字元執行cnpm install gulp -g；

5.3、查看是否正確安裝：命令提示字元執行gulp -v，出現版本號碼即為正確安裝。

6、建立package.json檔案

6.1、說明：package.json是基於nodejs項目必不可少的設定檔，它是存放在項目根目錄的普通json檔案；

6.2、它是這樣一個json檔案（注意：json檔案內是不能寫注釋的，複製下列內容請刪除注釋）：

{  "name": "20180101",  "version": "1.0.0",  "description": "",  "main": "gulpfile.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "gulp": "^3.9.1",    "gulp-base64": "^0.1.2",    "gulp-htmlmin": "^4.0.0",    "gulp-imagemin": "^4.1.0",    "gulp-livereload": "^3.8.1",    "gulp-minify-css": "^1.2.4",    "gulp-processhtml": "^1.2.0",    "gulp-rev": "^8.1.1",    "gulp-rev-collector": "^1.2.4",    "gulp-uglify": "^3.0.0"  }}

6.3、當然我們可以手動建立這個設定檔，但是作為一名有志青年，我們應該使用更為效率的方法：命令提示字元執行cnpm init

6.4、查看package.json協助文檔，命令提示字元執行cnpm help package.json

特別注意：package.json是一個普通json檔案，所以不能添加任何注釋。

7、本地安裝gulp外掛程式

7.1、安裝：定位目錄命令後提示符執行cnpm gulp install --save-dev；

7.2、本樣本以gulp-less為例（編譯less檔案），命令提示字元執行cnpm install gulp-less --save-dev；

7.3、將會安裝在node_modules的gulp-less目錄下，該目錄下有一個gulp-less的使用協助文檔README.md；

PS：細心的你可能會發現，我們全域安裝了gulp，項目也安裝了gulp，全域安裝gulp是為了執行gulp任務，本地安裝gulp則是為了調用gulp外掛程式的功能。

8、建立gulpfile.js檔案（重要）

8.1、說明：gulpfile.js是gulp項目的設定檔，是位於項目根目錄的普通js檔案（其實將gulpfile.js放入其他檔案夾下亦可）。

8.2、它大概是這樣一個js檔案：

var gulp = require('gulp')    cssmin = require('gulp-minify-css')             //css壓縮    uglify = require('gulp-uglify')               //js壓縮    imagemin = require('gulp-imagemin')            //圖片的壓縮    base64 = require('gulp-base64')                //- 把小圖片轉成base64字串    htmlmin = require('gulp-htmlmin')              //html的壓縮//壓縮  css檔案   和base64 和檔案名稱加md5尾碼gulp.task('testCssmin', function () {    gulp.src('css/*.css')        .pipe(base64())        // .pipe(rev())               //檔案名稱加md5尾碼        .pipe(cssmin())        // .pipe(rev.manifest())　　　　　　　　 //rev-mainfest.json檔案，裡面是壓縮檔的資訊        .pipe(gulp.dest('dist/css'));});// 壓縮 js 檔案gulp.task('script', function() {    // 1. 找到檔案    gulp.src('js/*.js')    // 2. 壓縮檔        .pipe(uglify({ mangle: false }))    // 3. 另存壓縮後的檔案        .pipe(gulp.dest('dist/js'))})//壓縮  img檔案gulp.task('testImagemin', function () {    gulp.src('images/*.{png,jpg,gif,ico}')        .pipe(imagemin({            optimizationLevel: 5, //類型：Number  預設：3  取值範圍：0-7（最佳化等級）            progressive: true, //類型：Boolean 預設：false 無損壓縮jpg圖片            interlaced: true, //類型：Boolean 預設：false 隔行掃描gif進行渲染            multipass: true //類型：Boolean 預設：false 多次最佳化svg直到完全最佳化        }))        .pipe(gulp.dest('dist/images'));});//壓縮html檔案gulp.task('testHtmlmin', function () {    var options = {        removeComments: true,//清除HTML注釋        collapseWhitespace: true,//壓縮HTML        collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"        minifyJS: true,//壓縮頁面JS        minifyCSS: true//壓縮頁面CSS    };    gulp.src('*.html')        .pipe(htmlmin(options))        .pipe(gulp.dest('dist/'));});// 監聽檔案的變化/* gulp.task('watch', function() {    livereload.listen();    gulp.watch(['css/*.css'], ['testCssmin']);    gulp.watch(['js/*.js'], ['script']);    gulp.watch(['images/*.{png,jpg,gif,ico}'], ['testImagemin']);    gulp.watch(['/*.html'], ['testHtmlmin']);}); *//* 合并上述我的方法 監控並執行任務 */gulp.task('default', [        'testCssmin',        'script',        'testImagemin',        'testHtmlmin',        // 'watch'    ]);

參考上面的 gulpfile.js  我們把靜態資源分css、js、images，然後把這個檔案複製出來到目錄dist。
那麼我們要做的就是把dist的檔案壓縮到css、js、images並即時監控修改了。
9、運行gulp

9.1、說明：命令提示字元執行gulp 任務名稱；

9.2、編譯less：命令提示字元執行gulp testLess；

9.3、當執行gulp default將會調用default任務裡的所有任務[‘testCssmin’,’script’,'testImagemin']。 10.總結 那麼我們就可以即時的進行修改並且瀏覽器能夠去即時的進行顯示代碼了