html压缩文件一定要解压之后才能打开

html文件解压方法如下：只有压缩文件才能进行解压处理； HTML文件就是一个基础文件，所以不需要进行解压； 可以选择使用编辑器或者浏览器来打开HTML文件。首先打开Cadence 新建一个库，File->New->Library 给新建的库起一个名字，右面选择Compile a new techfile，点OK 找到.tf 文件的路径 添入路径 点击OK 成功将库文件导入。再将drf 文件导入即可正常显示。1、在电脑上面找到需要解压的文件。2、右键单击这份压缩的文件，在d出的功能窗口里面点击解压文件。3、然后在右手边可以选择文件解压之后的存储地方。4、选择完毕之后，点击下方的确定按钮，等待系统解压即可。5、解压完毕之后，在刚选择的存储地方就可以找到解压后的文件了

注入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

HTML压缩本身对网站性能提升意义并不大，最多只能混淆一下让其他人难以查看，但是越来越多的前端工具已经让这种做法变得越来越没有意义，反而影响自己的开发，所以，放弃HTML压缩吧。

当然，这个结论也不是在所有情况下都成立，当你的访客足够多的时候，节省一个字节的大小可能都会导致大量的成本节省，以google为例，他的互联网占到整个互联网流量的40%，而思科预计2016年全球网络流量将会达到1.3ZB(1ZB = 10^9TB)，如果Google给每1MB的请求减少1字节，则每年可以节省流量近500TB。

---