前端html压缩和webStrom配置

简介

前面两篇讲了css和html的压缩,本篇讲下html文件的压缩,主要用的node插件是html-minifier,由于网上都是和node结合使用的,没有配置webstorm的教程,所以自己就瞎折腾了一样,搞出来了,碰到了一些坑记录下.

安装

#先安装 node
#略
#安装 html-minifier
npm install -g html-minifier

配置工具类

新建一个package.json文件,内容如下

{
  "name": "commpress",
  "version": "0.0.1",
  "dependencies": {
    "html-minifier": "^4.0.0"
  }
}

Shift加右键打开cmd,运行npm install

新建一个js文件内容如下

var fs = require('fs');
var arguments = process.argv.splice(2);
//获取第一个参数
var inputPath = arguments[0];
//获取第二个参数
var outPath = arguments[1];
var minify = require('html-minifier').minify;
fs.readFile(inputPath, 'utf8', function (err, data) {
    if (err) {
       throw err;
    }
    fs.writeFile(outPath, minify(data,{removeComments: true,collapseWhitespace: true,minifyJS:true, minifyCSS:true}),function(){
       // console.log('success');
    });
});

配置WebStorm

自定义监听器

配置

#
D:\Tools\SmallTools\commpress\html\commpressHtml.js $FileDir$/$FileName$ $FileDir$/../dist/$FileNameWithoutExtension$.html
#默认输出到同级的 dist文件夹下
$FileDir$/../dist/$FileNameWithoutExtension$.html