更多gulp常用插件使用请访问:gulp常用插件汇总


cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件。

更多使用文档请点击访问chai工具官网

安装

一键安装不多解释

npm install --save-dev cssnano

使用

使用 PostCSS 命令行工具(CLI)

安装 cssnano 之后,你需要一个 PostCSS 运行器(runner)来 执行 CSS 文件的压缩工作。我们推荐使用 PostCSS 的命令行模块(postcss-cli), 但是你也可以使用下一节中列出的任何替代方法。

通过以下命令安装 PostCSS CLI

npm install postcss-cli --global

完成此操作后,需要在项目的根目录中创建一个 postcss.config.js 文件来配置 cssnano。这既包含了 cssnano 也包含任何需要用到项目中的其它 插件 , 例如:

module.exports = {
plugins: [
require('cssnano')({
preset: 'default',
}),
],
};

关于预设(preset)请参考 预设(preset)指南

现在就可以压缩你的 CSS 文件了!通过在你的 项目目录下创建一个名为 input.css 的文件,并输入一些样式代码,然后执行:

postcss input.css > output.css

然后你就可以看到一个包含相同样式代码但是被压缩过的 output.css 文件了!

注意,你还可以在 GitHub 仓库中找到一个 基本示例 以供学习。

命令行工具(CLI)的替代方案

你还可以使用任何其它的 PostCSS 运行器(runner)来管理 CSS 的压缩工作,下面列出的这些比较常用。

gulp常用插件之cssnano使用的更多相关文章

  1. node和gulp实现前端工程自动化(附:gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...

  2. gulp常用插件之gulp-postcss使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS. 更多使用文档请点击访问gulp-postcss工 ...

  3. gulp常用插件之gulp-rev-collector使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径. ...

  4. 精通gulp常用插件

    本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...

  5. gulp常用插件之gulp-eslint使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-eslint**这是一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件.. 更多使用文档 ...

  6. gulp常用插件之gulp-babel使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...

  7. gulp常用插件之pump使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 pump这是一款小型节点模块,可将流连接在一起并在其中一个关闭时将其全部销毁. 使用标准source.pipe(dest)源时,如果dest发出关 ...

  8. gulp常用插件之gulp-notify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-notify这是一款gulp通知插件. 更多使用文档请点击访问gulp-notify工具官网. 安装 一键安装不多解释 npm inst ...

  9. gulp常用插件之gulp-beautify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-beautify这是一款使用js-beautify进行资产美化插件. 更多使用文档请点击访问gulp-beautify工具官网. 安装 ...

随机推荐

  1. num10---适配器模式

    1.类适配器 Adapter类,通过继承 被适配的类,实现目标类的接口,完成适配. 分析: java 单继承,所以适配器类 需要继承 被适配类,这就要求目标类必须是接口,有一定局限性. 被适配类的方法 ...

  2. CVE-2019-0199:Apache Tomcat DDOS

    CVE-2019-0199:Apache Tomcat DDOS 0X00漏洞概述 Apache Tomcat HTTP/2拒绝服务漏洞,该漏洞是由于应用服务允许接收大量的配置流量,并且客户端在没有读 ...

  3. Ubuntu18 永久设置分辨率1920x1080

    起因 虚拟机(virtualBox)中设置 1920*1080 的分辨率后, 每次重启后都会回到默认,永久设置的方式如下 步骤: 添加系统设置 sudo xrandr --newmode " ...

  4. 四步搞定Zabbix 日志文件监控

    Zabbix 日志文件监控 一.给运行Zabbix agent的用户授予要监控日志的读取权限. 1. 執行下面的命令,追加app的可讀權限: setfacl -m u:app:r-- /var/log ...

  5. 设置ssh远程其他主机登录显示提示信息

    文件及路径: /etc/motd 实例: [root@A-client ~]# ssh -p 22 test@10.0.0.2 test@10.0.0.2's password: Last login ...

  6. java架构之路-(dubbo专题)dubbo的基本使用

    今天我们来说一下dubbo的基本使用,没有什么高阶的知识,真的超级简单易懂. Dubbo核心功能解释 dubbo 阿里开源的一个SOA服务治理框架,从目前来看把它称作是一个RPC远程调用框架更为贴切. ...

  7. SignalR—实例

    本例子将讲述使用SignalR实现页面实时显示数据,而不是需要用户刷新页面或使用Ajax轮询才能实现实时显示数据. 1.使用NuGet安装SignalR. 2.创建Hub类,起名为testHub. 3 ...

  8. [WPF 自定义控件]创建包含CheckBox的ListBoxItem

    1. 前言 Xceed wpftoolkit提供了一个CheckListBox,效果如下: 不过它用起来不怎么样,与其这样还不如参考UWP的ListView实现,而且动画效果也很好看: 它的样式如下: ...

  9. Linux 任务计划,周期性任务执行

    未来的某个时间点执行一次某任务的命令:at,batch 命令执行的结果,会发送到任务发起者的邮箱 周期性运行某任务:crontab 命令执行的结果,会发送到任务发起者的邮箱 本地邮件服务 发邮件的协议 ...

  10. myeclipce 按 Alt + / 代码提示无法感应自己定义的类 解决方案

    解决方案:如图把这些选项全部都勾选即可.(注意 :需先排除是不是快捷键冲突,我遇到的问题是Alt+/可以提示jdk内置的对象和方法,但是无法提示自定义的类和方法.如Alt+/无法提示任何信息 需重新设 ...