gulp壓縮整站方法（html/css/js/image）

注入package.json(此json文件需要自己在當前項目目錄下創建即可--不能有注釋)安裝：

npm install gulp-uglify --save-dev

全局安裝：

npm install gulp-uglify -g

　　

整站靜態文件壓縮配置文件gulpfile.js（html/css/image/js; 前提是安裝下列require用到的模塊）：

var gulp = require('gulp'),//基礎庫
    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'),//檢測錯誤
	gutil=require('gulp-util');//如果有自定義方法，會用到
	

var date = new Date().getTime();

gulp.task('clean',function(){
	return gulp.src('min/**',{read:false})
		.pipe(clean());
});
function errrHandler( e ){
    // 控制台發聲,錯誤時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,//壓縮頁面JS
        minifyCSS: true//壓縮頁面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,//類型：Boolean 默認：true [是否開啟高級優化（合並選擇器等）]
            compatibility: 'ie7',//保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: false,//類型：Boolean 默認：false [是否保留換行]
            keepSpecialComments: '*'
            //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴
        }))		
        .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' ,'$']},//類型：Boolean 默認：true 是否修改變量名
            compress: true,//類型：Boolean 默認：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, //類型：Boolean 默認：false 無損壓縮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詳細介紹：https://docs.npmjs.com/files/package.json

（package.json  npm init 命令行創建文件方法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里的內容即為你安裝gulp的模塊插件名稱和版本號！

 

最后，node.js里指定到當前項目目錄下輸入gulp命令即可：

gulp default