grunt 压缩 合并 css 后 需要删除注释 与 合并同名 选择器 怎么配置 gruntfile.js

html-css015

grunt 压缩 合并 css 后 需要删除注释 与 合并同名 选择器 怎么配置 gruntfile.js,第1张

Grunt基于Node.js,其中 npm 是 Node.js 的包管理器,而Grunt和Grunt插件就通过 npm 安装并管理。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。

安装Node.js:

去Node.js官网,点击INSTALL下载并安装,现在的Node.js会自动安装npm。

安装完成之后,打开命令行,进行后续的操作(开始->输入CMD 或 开始->所有程序 ->命令提示符)。

进入Node.js的安装目录(默认路径为"C:\Program Files\nodejs"):

cd \pro*\nod*

网站优化:一个是压缩合并css,js,一个是合并图片和小图标来达到减少请求量的目的;所以当然是所有的js代码放到同一个js文件中好;需要注意的是:

1、只要命名不冲突放一个文件里面完全没问题,初始化代码用一个$(function(){...})包裹着就可以了;

2、不同的页面执行不同的逻辑代码块完全不冲突,关键是知道自己在做什么;

具体做法:

1)比如a.css,b.css,c.css,把里面的内容都复制到一个css中,main.css这样手动就可以合并

压缩的话,网上都有工具来压缩,直接百度 css压缩 就可以了

2)js大部分是可以直接和css一样手动合并,然后压缩的(压缩方法,和压缩css一样,百度去),不过要注意复制到文件时的顺序,和代码里面的一些规范,不要把依赖什么的搞混了;如果js文件非常多手动处理很麻烦的时候,可能需要借助工具来实现,你可以试着用前端的一些加载器(require,seajs)来做一些优化,达到按需加载的目的,推荐用seajs试试;自动压缩的话,可以用nodejs的grunt来压缩,很好用。

nodejs本身只能加载js,css文件只能做为文本被读取。

如果想要加载解析css,可以配合webpack,然后使用css-loader、style-loader来使用。

css-loader是用来加载解析css的,将其处理成对象,方便js进一步处理;

style-loader可以将css-loader处理的对象导入到html中,从而可以在网页中运行。