什么是GULP?
? ? ? ? ? ? GULP 是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能
對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使
用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率
安裝GULP
Gulp 是基于 node.js 環境運行的，所以我們首先需要安裝 node.js 環境
Node.js的安裝
1. 下載 nodejs 安裝包
2到 nodejs 官網下載軟件 https://nodejs.org
安裝 Nodejs
在 Window 系統中直接下一步下一步式安裝。安裝好后 WIN+R 輸入 cmd 調出 DOS 窗
口，輸入 node -v 看看是否有版本信息，如果沒有則查看系統變量 Path，把 path 配置上
去
如果在 cmd 中能夠輸出上圖的信息，說明 node.js 的環境已經安裝成功了，下面就可以
開始 gulp 的安裝了
3. 推薦安裝 cnpm
安裝 cnpm
執行 npm install cnpm -g --registry=https://registry.npm.taobao.org
3.2 檢測 cnpm 是否安裝成功
執行 cnpm -v 顯示版本號即安裝成功
gulp? 的安裝
全局安裝? gulp
打開 Node.js command prompt 或者 cmd 命令提示符
輸入命令：npm install –g gulp
然后輸入 gulp -v，看看是否有版本信息
項目文件根目錄新建 package.json
注：package.json 是基于 nodejs 項目必不可少的配置文件，它是存放在項目根目錄的普通 json
文件重點內容
?? 進入你的項目文件
示例：進入 D:/WWW/test 項目文件夾中
gulp 安裝教程，使用教程，簡單的自動化任務教程
執行命令 cnpm init 來新建 package.json
gulp 安裝教程，使用教程，簡單的自動化任務教程
檢測 package.json 是否成功新建
查看項目文件根目錄，是否新建 package.json，且內容是否和你終端中輸入的一致。
注：可不使用 cnpm init 方式，可選擇手動創建 package.json 配置文件
本地安裝
建立項目，創建 gulpfile.js 和 package.json 文件。運行命令
cnpm install gulp --save-dev
安裝本地 gulp。
安裝相關插件
Gulp 提供了大量的常用插件，供我們使用，下面列舉一些大家可能經常要使用的插件：
?? sass 的編譯（gulp-sass）
?? less 編譯 （gulp-less）
?? 重命名（gulp-rename）
?? 自動添加 css 前綴（gulp-autoprefixer）
?? 壓縮 css（gulp-clean-css）
?? js 代碼校驗（gulp-jshint）
?? 合并 js 文件（gulp-concat）
?? 壓縮 js 代碼（gulp-uglify）
?? 壓縮圖片（gulp-imagemin）
?? 自動刷新頁面（gulp-livereload，谷歌瀏覽器親測，谷歌瀏覽器需安裝 livereload 插件）
?? 圖片緩存，只有圖片替換了才壓縮（gulp-cache）
?? 更改提醒（gulp-notify）
less 和 和 sass? 的編譯（gulp-less ，gulp-sass ）
less 使用 gulp-less,安裝：cnpm install –save-dev gulp-less
在 Gulpfile.js 執行如下代碼：
var gulp = require('gulp'),
less = require("gulp-less");
gulp.task('test-less', function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
Sass? 插件：
sass 使用 gulp-sass,安裝：npm install –save-dev gulp-sass
在 Gulpfile.js 執行如下代碼：
var gulp = require('gulp'),
sass = require("gulp-sass");
gulp.task('test-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
壓縮 HTML? 頁面 （gulp-htmlmin ）
Gulp-htmlmin 插件的安裝：
cnpm install gulp-htmlmin --save-dev
安裝成功后，我們在 gulpfile.js 中編寫代碼，完成頁面的壓縮：
var gulp = require("gulp");//gulp模塊var gulp_htmlmin = require('gulp-htmlmin');//gulp-htmlmin插件模塊//test-htmlmin任務gulp.task("test-htmlmin",function(){var options = {removeComments: true,//清除HTML注釋collapseWhitespace: true,//壓縮HTMLcollapseBooleanAttributes: true,//省略布爾屬性的值==>removeEmptyAttributes: true,//刪除所有空格作屬性值==>removeScriptTypeAttributes: true,//刪除的type="text/javascript"removeStyleLinkTypeAttributes: true,//刪除和的type="text/css"minifyJS: true,//壓縮頁面JSminifyCSS: true//壓縮頁面CSS};gulp.src("src/*.html").pipe(gulp_htmlmin(options)).pipe(gulp.dest("dest/"))});
執行命令：
gulp test-htmlmin
使用 gulp-autoprefixer 根據設置瀏覽器版本自動處理瀏覽器前綴。使用她我們可以很瀟
灑地寫代碼，不必考慮各瀏覽器兼容前綴。【特別是開發移動端頁面時，就能充分體現它的
優勢。例如兼容性不太好的 flex 布局。】
本地安裝 gulp-autoprefixer
cnpm install gulp-autoprefixer --save-dev
之后在 gulpfile.js 中書寫任務：
var gulp = require("gulp");//gulp模塊
var gulp_less = require("gulp-less");//gulp-less插件模塊
var gulp_sass = require("gulp-sass");//gulp-sass插件模塊
var gulp_htmlmin = require('gulp-htmlmin');//gulp-htmlmin插件模塊
var autoprefixer = require('gulp-autoprefixer');//autoprefixer插件模塊
//test-autoprefixer任務
gulp.task("test-autoprefixer",function(){
gulp.src("src/css/*.css")
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化屬性值 默認：true 像這樣：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前綴 默認：true
}))
.pipe(gulp.dest("dest/css/"))
});
在 cmd 中執行命令：
gulp test-autoprefixer
使用 gulp-minify-css 壓縮 css 文件，減小文件大小，并給引用 url 添加版本號避免緩存。
重要：gulp-minify-css 已經被廢棄，請使用 gulp-clean-css，用法一致。
本地安裝 gulp-minify-css
github：https://github.com/jonathanepollack/gulp-minify-css
命令提示符執行 cnpm install gulp-minify-css --save-dev
//引入所需的模塊
var gulp = require("gulp");//gulp模塊
var gulp_less = require("gulp-less");//gulp-less插件模塊
var gulp_sass = require("gulp-sass");//gulp-sass插件模塊
var gulp_htmlmin = require('gulp-htmlmin');//gulp-htmlmin插件模塊
var autoprefixer = require('gulp-autoprefixer');//autoprefixer插件模塊
var cssmin_minify = require('gulp-minify-css');
var cssmin_clean = require('gulp-clean-css');
//確保已本地安裝gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]
var cssver = require('gulp-make-css-url-version');
//test-minify任務
gulp.task("test-minify",function(){
gulp.src("src/css/*.css")
.pipe(cssmin_minify({
advanced: false,//類型：Boolean 默認：true [是否開啟高級優化（合并選擇器等）]
compatibility: 'ie7',//保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式；
'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: true,//類型：Boolean 默認：false [是否保留換行]
keepSpecialComments: '*'
//保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部
分前綴
}))
.pipe(gulp.dest("dest/css/"))
});
給 css 文件里引用 url 加版本號（根據引用文件的 md5 生產版本號），像這樣：
//確保已本地安裝gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]
var cssver = require('gulp-make-css-url-version');
//cssmin_clean任務
gulp.task('test-cssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssver()) //給css文件里引用文件加版本號（文件MD5）防止緩存
.pipe(cssmin_clean())
.pipe(gulp.dest('dest/css'));
});
使用 gulp-uglify 壓縮 javascript 文件，減小文件大小。
本地安裝 gulp-uglify
github：https://github.com/terinjokes/gulp-uglify
命令提示符執行 cnpm install gulp-uglify --save-dev
gulpfile.js 文件：
gulp.task('jsmin', function () {
gulp.src('src/js/index.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
如果有多個文件壓縮：
//多個文件
gulp.task('jsmin', function () {
gulp.src(['src/js/index1.js','src/js/login.js','src/js/js1.js','src/js/omg.js'])
//多個文件以數組形式傳入
.pipe(uglify())
.pipe(gulp.dest('dest/js'));
});
也可以使用匹配方式：
//排除排除混淆關鍵字，多個參數
gulp.task('jsmin', function () {
//壓縮src/js目錄下的所有js文件
//除了test1.js和test2.js（**匹配src/js的0個或多個子文件夾）
gulp.src(['src/js/*.js', '!src/js/**/*.js'])
.pipe(uglify({
// mangle: true,//類型：Boolean 默認：true 是否修改變量名
mangle: {except: ['require' ,'exports' ,'module' ,'$']},//排除混淆關鍵字
compress: true,//類型：Boolean 默認：true 是否完全壓縮
preserveComments: 'all' //保留所有注釋
}))
.pipe(gulp.dest('dest/js'));
})
使用 gulp-concat 合并 javascript 文件，減少網絡請求。
本地安裝 gulp-concat
github：https://github.com/wearefractal/gulp-concat
命令提示符執行 cnpm install gulp-concat --save-dev
gulpfile.js 文件：
var concat = require('gulp-concat');
//合并js文件
gulp.task('test_concat', function () {
gulp.src('src/js/*.js')
.pipe(concat('all.js'))//合并后的文件名
.pipe(gulp.dest('test/js'));
});
使用 gulp-imagemin 壓縮圖片文件（包括 PNG、JPEG、GIF 和 SVG 圖片）。注意：安裝時
很容易出錯的。
本地安裝 gulp-imagemin
github：https://github.com/sindresorhus/gulp-imagemin
命令提示符執行 cnpm install gulp-imagemin --save-dev
gulpfile.js 文件：
基本壓縮：
var concat = require('gulp-concat');
//合并js文件
gulp.task('test_concat', function () {
gulp.src('src/js/*.js')
.pipe(concat('all.js'))//合并后的文件名
.pipe(gulp.dest('test/js'));
});
gulp-imagemin 其他參數：
gulp.task('testImagemin', function () {
gulp.src('src/img.{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('dest/img'));
});
深度壓縮圖片
var imagemin = require('gulp-imagemin');
//確保本地已安裝imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
var pngquant = require('imagemin-pngquant');
//深度壓縮圖片
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
use: [pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件
}))
.pipe(gulp.dest('dest/img'));
});
只壓縮修改的圖片。壓縮圖片時比較耗時，在很多情況下我們只修改了某些圖片，沒有
必要壓縮所有圖片，使用”gulp-cache”只壓縮修改的圖片，沒有修改的圖片直接從緩存文
件讀取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）：
//確保本地已安裝imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
var pngquant = require('imagemin-pngquant');
//確保本地已安裝gulp-cache [cnpm install gulp-cache --save-dev]
var cache = require('gulp-cache');
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
})))
.pipe(gulp.dest('dest/img'));
});
