注入package.json(此json文件需要自己在當(dāng)前項(xiàng)目目錄下創(chuàng)建即可--不能有注釋)安裝：
npm install gulp-uglify --save-dev
全局安裝：
npm install gulp-uglify -g
整站靜態(tài)文件壓縮配置文件gulpfile.js（html/css/image/js; 前提是安裝下列require用到的模塊）：
var gulp = require('gulp'),//基礎(chǔ)庫(kù)
? ? htmlmin = require('gulp-htmlmin'),//html壓縮
cssmin = require('gulp-minify-css'),//css壓縮
jshint = require('gulp-jshint'),//js檢查
uglify = require('gulp-uglify'),//js壓縮
imagemin = require('gulp-imagemin'),//圖片壓縮
? ? pngquant = require('imagemin-pngquant'),//圖片深入壓縮
imageminOptipng = require('imagemin-optipng'),
? ? imageminSvgo = require('imagemin-svgo'),
? ? imageminGifsicle = require('imagemin-gifsicle'),
? ? imageminJpegtran = require('imagemin-jpegtran'),
domSrc = require('gulp-dom-src'),
cheerio = require('gulp-cheerio'),
processhtml = require('gulp-processhtml'),
Replace = require('gulp-replace'),
cache = require('gulp-cache'),//圖片壓縮緩存
clean = require('gulp-clean'),//清空文件夾
conCat = require('gulp-concat'),//文件合并
plumber=require('gulp-plumber'),//檢測(cè)錯(cuò)誤
gutil=require('gulp-util');//如果有自定義方法，會(huì)用到
var date = new Date().getTime();
gulp.task('clean',function(){
return gulp.src('min/**',{read:false})
.pipe(clean());
});
function errrHandler( e ){
? ? // 控制臺(tái)發(fā)聲,錯(cuò)誤時(shí)beep一下
? ? gutil.beep();
? ? gutil.log(e);
this.emit('end');
}
gulp.task('cleanCash', function (done) {//清除緩存
? ? return cache.clearAll(done);
});
gulp.task('htmlmin', function () {
? ? var options = {
? ? ? ? removeComments: true,//清除HTML注釋
? ? ? ? collapseWhitespace: true,//壓縮HTML
? ? ? ? collapseBooleanAttributes: false,//省略布爾屬性的值 <input checked="true"/> ==> <input />
? ? ? ? removeEmptyAttributes: false,//刪除所有空格作屬性值 <input id="" /> ==> <input />
? ? ? ? removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
? ? ? ? removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
? ? ? ? minifyJS: true,//壓縮頁(yè)面JS
? ? ? ? minifyCSS: true//壓縮頁(yè)面CSS
? ? };
? ? gulp.src(['index/*.htm','index/*.html'])
.pipe(plumber({errorHandler:errrHandler}))
.pipe(Replace(/_VERSION_/gi, date))
.pipe(processhtml())
? ? ? ? .pipe(htmlmin(options))
? ? ? ? .pipe(gulp.dest('min'));
});
gulp.task('cssmin', function(){
? ? gulp.src('index/**/*.css')
.pipe(conCat('css/index.min.css'))
.pipe(plumber({errorHandler:errrHandler}))
? ? ? ? .pipe(cssmin({
? ? ? ? ? ? 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: false,//類(lèi)型：Boolean 默認(rèn)：false [是否保留換行]
? ? ? ? ? ? keepSpecialComments: '*'
? ? ? ? ? ? //保留所有特殊前綴 當(dāng)你用autoprefixer生成的瀏覽器前綴，如果不加這個(gè)參數(shù)，有可能將會(huì)刪除你的部分前綴
? ? ? ? }))
? ? ? ? .pipe(gulp.dest('min'));
});
gulp.task('jsmin', function () {
? ? gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])
.pipe(conCat('js/index.min.js'))
.pipe(plumber({errorHandler:errrHandler}))
? ? ? ? .pipe(uglify({
? ? ? ? ? ? mangle: {except: ['require' ,'exports' ,'module' ,'$']},//類(lèi)型：Boolean 默認(rèn)：true 是否修改變量名
? ? ? ? ? ? compress: true,//類(lèi)型：Boolean 默認(rèn)：true 是否完全壓縮
? ? ? ? ? ? preserveComments: 'false' //保留所有注釋
? ? ? ? }))
? ? ? ? .pipe(gulp.dest('min'));
});?
gulp.task('imagemin', function () {
? ? gulp.src('index/**/*.{png,jpg,gif,ico}')
.pipe(plumber({errorHandler:errrHandler}))
? ? ? ? .pipe(cache(imagemin({
? ? ? ? ? ? progressive: true, //類(lèi)型：Boolean 默認(rèn)：false 無(wú)損壓縮jpg圖片? ? ? ? ?
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
? ? ? ? ? ? use: [pngquant(),imageminJpegtran({progressive: true})
? ? ? ? ? ? , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度壓縮png圖片的imagemin插件? ? ? ? ?
? ? ? ? })))
? ? ? ? .pipe(gulp.dest('min'));
});
gulp.task('default',['clean'],function(){
gulp.start('cssmin','htmlmin','jsmin','imagemin');
});
package.json(例子) package.json詳細(xì)介紹：https://docs.npmjs.com/files/package.json
（package.json ?npm init 命令行創(chuàng)建文件方法http://blog.csdn.net/liyanhui1001/article/details/44020235 ）
{
? "name": "web",
? "version": "1.0.0",
? "description": "my text",
? "main": "gulpfile.js",
? "dependencies": {
? ? "gulp": "^3.9.1",
? ? "gulp-cache": "^0.4.5",
? ? "gulp-concat": "^2.6.0",
? ? "gulp-htmlmin": "^2.0.0",
? ? "gulp-imagemin": "^3.0.1",
? ? "gulp-jshint": "^2.0.1",
? ? "gulp-minify-css": "^1.2.4",
? ? "gulp-plumber": "^1.1.0",
? ? "gulp-uglify": "^1.5.4",
? ? "gulp-util": "^3.0.7",
? ? "imagemin-pngquant": "^5.0.0",
? ? "jshint": "^2.9.2",
? ? "gulp-clean": "^0.3.2"
? },
? "devDependencies": {
? ? "gulp-cheerio": "^0.6.2",
? ? "gulp-dom-src": "^0.2.0",
? ? "gulp-jslint": "^1.0.1",
? ? "gulp-processhtml": "^1.1.0",
? ? "gulp-rename": "^1.2.2",
? ? "gulp-replace": "^0.5.4",
? ? "gulp-webpack": "^1.5.0",
? ? "imagemin-gifsicle": "^5.1.0",
? ? "imagemin-jpegtran": "^5.0.2",
? ? "imagemin-optipng": "^5.1.1",
? ? "imagemin-svgo": "^5.1.0",
? ? "webpack": "^1.13.1"
? },
? "scripts": {
? ? "test": "echo \"Error: no test specified\" && exit 1"
? },
? "keywords": [
? ? "web"
? ],
? "author": "yl",
? "license": "ISC"
}
devDependencies里的內(nèi)容即為你安裝gulp的模塊插件名稱(chēng)和版本號(hào)！
最后，node.js里指定到當(dāng)前項(xiàng)目目錄下輸入gulp命令即可：
gulp default
