下载 yuicompressor-2.4.2.zip 资源包,解压后 yuicompressor-2.4.2.jar 在 yuicompressor-2.4.2/build 目录下。
2、创建build-yui.xml 文件
然后创建ant 运行的文件，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<project name="MyTask" basedir="." default="compress-css">
<property name="src.dir" value="./src"/>
<target name="compress-js">
<apply executable="java" parallel="false" failonerror="true"
dest="${src.dir}/dest"
append="false" force="true">
<fileset
dir="${src.dir}"
includes="js/**.js" />
<arg line="-jar" />
<arg path="yuicompressor-2.4.2.jar" />
<arg line="--charset utf-8" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.js" to="*.js" />
<targetfile />
<arg line="--nomunge" /><!--只压缩去掉空格，不混淆-->
</apply>
</target>
<target name="compress-css">
<apply executable="java" parallel="false" failonerror="true"
dest="${src.dir}/dest"
append="false" force="true">
<fileset
dir="${src.dir}"
includes="css/**.css" />
<arg line="-jar" />
<arg path="yuicompressor-2.4.2.jar" />
<arg line="--charset utf-8" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.css" to="*.css" />
<targetfile />
</apply>
</target>
</project>
3、运行ant
在dos下运行命令：ant -buildfile build-yui.xml 命令。
注：目标目录必须存在，否则会报错。
反爬虫就是和爬虫抗衡，减少被爬取。因为搜索引擎的流行，网络爬虫已经成了很普及网络技术， 相当部分国内爬虫不遵守robots协议。所有有了保护自己内容不让别人抓取的反爬虫需求--------------------------反爬虫方法1、手工识别和拒绝爬虫的访问2、通过识别爬虫的User-Agent信息来拒绝爬虫3、通过网站流量统计系统和日志分析来识别爬虫4、网站的实时反爬虫防火墙实现5、通过JS算法，文字经过一定转换后才显示出来，容易被破解。某技术网站采用了这种方法6、通过CSS隐藏技术，可见的页面样式和HTML里DIV结构不同，增加了爬虫的难度，同时增加自己的维护难度。技术网站采用了这种方法7、通过JS不让用户复制，这对非专业人员有效，对技术人员/工程师来说，没有任何效果。不少网站采用。8、通过flash等插件技术（会被破解，同时对用户不友好，有流失用户的可能性）。早期网站用得多，移动互联网来后，这种方式对用户不友好，少有专业网站采用了。9、图片化A:将文字图片化，增加了维护成本，和移动端的可读性B:将标点符号图片化，再适当增加CSS混淆，这是一种较好的办法，不影响搜索引擎收录，不影响用户使用。但影响爬虫，是一种较好的反爬虫方式，某著名的文学网站采用了这种方法10、交给专业反爬虫公司来处理流程 1反爬虫混淆设计器 ---->产生反爬虫混淆素材2混淆素材--->将服务器端文字变成不可阅读文字3网络传输--->不可阅读文字+混淆素材4浏览器-->绘制阶段显示可读文字5浏览者能看见内容 但是无能有效复制，无法通过底层协议抓取 6混淆算法随时改变，只需要放入新素材就可以了，不需要工程师参与。 特点依靠文字矩阵变换来提高蜘蛛爬虫软件抓取的代价.由发布人员，而不是技术人员来更新混淆算法保护方:内容保护的方法素材易复制,易部署和运营抓取/窃取方:面对对方快速变化,增加了成本CSS Modules 模块化方案CSS Modules 内部通过ICSS 来解决样式导入和导出这两个问题。分别对应 :import 和 :export 两个新增的伪类。
:import("path/to/dep.css") { localAlias: keyFromDep /* ... */}:export {
exportedKey: exportedValue /* ... */}
但直接使用这两个关键字编程太麻烦，实际项目中很少会直接使用它们，我们需要的是用 JS 来管理 CSS 的能力。结合 Webpack 的
css-loader 后，就可以在 CSS 中定义样式，在 JS 中导入。
启用 CSS Modules
//
webpack.config.jscss?modules&localIdentName=[name]__[local]-[hash:base64:5]
加上 modules 即为启用， localIdentName 是设置生成样式的命名规则。
/* components/Button.css */.normal { /* normal 相关的所有样式 */ }.disabled { /*
disabled 相关的所有样式 */ }
/* components/Button.js */import styles from
'./Button.css'console.log(styles)buttonElem.outerHTML = `Submit`
生成的 HTML 是
Processing...
注意到 button--normal-abc5436 是 CSS Modules 按照 localIdentName 自动生成的 class
名。其中的 abc5436 是按照给定算法生成的序列码。经过这样混淆处理后，class
名基本就是唯一的，大大降低了项目中样式覆盖的几率。同时在生产环境下修改规则，生成更短的 class 名，可以提高 CSS 的压缩率。
上例中 console 打印的结果是：
Object { normal: 'button--normal-abc546', disabled:
'button--disabled-def884',}
CSS Modules 对 CSS 中的 class 名都做了处理，使用对象来保存原 class 和混淆后 class 的对应关系。
通过这些简单的处理，CSS Modules 实现了以下几点：
所有样式都是 local 的，解决了命名冲突和全局污染问题
class 名生成规则配置灵活，可以此来压缩 class 名
只需引用组件的 JS 就能搞定组件所有的 JS 和 CSS
依然是 CSS，几乎 0 学习成本
