gulp常用插件之cssnano使用
2024-10-16 00:28:29
更多gulp常用插件使用请访问:gulp常用插件汇总
cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件。
安装
一键安装不多解释
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 的压缩工作,下面列出的这些比较常用。
- Grunt
使用 grunt-postcss。 - Gulp
使用 gulp-postcss。 - Webpack
将 cssnano 与 postcss-loader 一起使用。 - 其它
请参阅 PostCSS 文档 了解更多可用的执行器(runner)。
最新文章
- poj 3414 Pots bfs+模拟
- 【Python】[面向对象编程] 访问限制,继承和多态
- WCF 已知类型和泛型解析程序 KnownType
- raid0
- 深入理解JavaScript闭包(closure)
- Android 编程下 java.lang.NoClassDefFoundError: cn.jpush.android.api.JPushInterface 报错
- 网络编程---(数据请求+slider)将网络上的大文件下载到本地,并打印其进度
- shell输出加颜色
- Asp.Net MVC4配置Ext.Net
- Oracle的表连接方式
- Fedora20安装完Nvidia后启动一直黑屏解决办法。
- 虚拟主机,VPS,云主机之间的区别?
- Changes of user relationship in AD can't be correctly synchronized to SCSM
- Jenkins自动化部署-----持续交付【转】
- Windows自定义运行命令
- redis主从同步配置
- python 中的 list dict 与 set 的关系
- hive如何执行一条sql的例子
- python getmtime() 最近修改文件内容的时间
- 线性表 (单链表、循环链表-python实现)