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