minifier——一个 nodejs 的 js 及 css 压缩插件

简要介绍了如何通过 minifier 插件来精简压缩 js 和 css 文件。

minifier 是一个 nodejs 下的用于压缩 js 和 css 文件的插件。

首先确保已经安装了 nodejs 的环境,然后通过以下命令安装此插件:

npm install [-g] minifier

之后,如下图所示:假如在 d:\dev\exp\web 下有一些 js 和 css 文件:

那么,假如想压缩那个 hello.js 文件,则通过执行如下 minify 命令:

minify hello.js

则当前文件夹下会默认生成一个叫 hello.min.js 的精简压缩的文件:

压缩之前文件是这样:

[js]/**

  • test minify */ function sayHello(name) { console.log('hello ' + name + '.'); } // hello golden sayHello('golden');[/js]

之后的 min 版本的文件则这样:

[js]/**

  • test minify */ function sayHello(l){console.log("hello "+l+".")}sayHello("golden") [/js]

可以看到,除了开头处的 jsdoc 文件注释保留原样外,其它部分都变得很紧凑了,某些注释也去掉了,甚至一些局部变量名也简化了。

压缩 css 文件过程类似。

如果不喜欢它缺省的文件名,还可以用 --output 选项显式指定压缩后的文件名(还可以包含一个不同的路径):

minify --output my.js hello.js

那么压缩后的文件名则变为 my.js,位置与原文件相同(因为没有额外指定其它路径)。

还可以去到上一级目录上,然后针对整个 web 文件夹执行 minify 命令:

minify web

如此则将整个 web 文件夹下的所有 js 和 css 文件都压缩了,压缩后的文件名还是按缺省的方式,也即是 xxx.min.js 或 xxx.min.css,并放在跟原文件同样的位置。

更多用法可以参考官网的介绍:https://www.npmjs.com/package/minifier

今天在做网页的幻灯片时发现一个问题,就是在父元素设置隐藏时,也即 visibility:hidden,如果它下面的子元素设置了 visibility:visible,那么子元素依旧是可见的。

这点跟 display:none 之类的是不同的。而规范也确实是这么说的:

hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

CSS 2.1

特此记录。

CSS 绘制三角形原理演示(动画)V3 版,具体参见以下链接:

//exp.xiaogd.net/hm/demo/css/css-border/v3/cbt_slide.html

此版本的改进有以下几点:

  • 更加细化的步骤。
  • 步骤间的连接过渡更加友好,具体为在下一步骤中尽量保留上一步的结果,并在此基础上演化。
  • 调整部分页面布局为左右两栏,充分利用页面空间。
  • 代码高亮方面的一些特性使用,使阅读更加友好。
  • 去掉一些步骤,比如删掉了背景颜色部分。
  • 去掉了过于花哨的连接动画,比如旋转方面的。
  • 其它一些小的改进,如增大了 border 的尺寸,把颜色从粉色改为红色,增加了部分文字的移入移出效果等。

一些存在的问题:

1、在 Edge 浏览器上有问题,由代码高亮增强插件导致。

2、某些子步骤不能回退或在回放过程中行为不一致,需要重新刷新页面。

这点由于框架本身并太支持过于细化和灵活的步骤,自己利用了一些 hack 的形式来达到某些效果,手写了不少的 js。目前来说,至少正常按顺序浏览没有太大问题,但要支持回退则还有许多琐碎的事要做,暂时也没有通盘去考虑这些,只是先对付了事,想达到较好的效果恐怕还要修改框架的源码。

最后我想说一点是,对于这个问题我目前已经做了有三个版本,但并不是说这个问题多么重要,又或者是我对它有什么特别的兴趣,都不是的。

或许后面会写些其它方面的主题。

我主要是想探索一些展示知识的新方式,探讨一些可能性以及评估这些工作的难度。所以,还是跟之前那样,如果你有什么意见或建议,欢迎留言!

之前也曾写了一个类似的演示,因为一开始弄 impress.js,一些特性还不熟悉,做得相对较差了些,现在依旧可以访问:

CSS 绘制三角形原理演示(动画)(旧版)(不推荐)

现在重新做了些修改,V2 版本参见:

CSS 绘制三角形原理演示(动画)V2 版

主要的一些改进如下:

  • 增加了子步骤,一页中内容过多时可以逐步呈现。
  • 增加了代码的高亮。(使用了 prism.js)
  • 增强的 impress.js,增加了导航按钮,下拉选择列表,进度条以及自动播放等特性。
  • 重新规划了页面的整体布局,在结尾增加了预览页。
  • 增加了部分动画演示,调整了部分语句及顺序等。
  • 支持在手机端阅读(不过导航效果等还不太好,仍不推荐在手机端阅读)。

如果你有什么改进意见,欢迎留言!