grunt压缩代码

❶ 现在比较好用的前端开发工具有哪些啊

1. node.jsnpm， 这个是前端工具的一个平台，没有举拿他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器

2. bower, 库依赖管理器，类似于npm，但针对浏览器javaScript的依赖管理，减少寻找库，下载库和升级库的烦恼

3.grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watchliveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行

5. 本人用less比较多，因为基本无缝兼容历史遗留系统中的css，（而Sass语法比较特殊，还没有专门用过，应该开发新系统的css比较好），一套css预编译语言，可以把less语法转成css语法，lessc是less语言编译器，配合grunt less，编写大型css文档毫无压力。

6.Phantomjs，没有界面的浏览器，用js脚本控制其操作网页。测试，抓图，网页流程自动化利器。配合casperjs的语法简化功能真强库后，控制Phantomjs就更加容易了

7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能，在利用live-reload即时刷新功能，可以让你开发css的时候，快速对n多个页面进行观察，看其前后变化。不过缺点也比较明显，就是速度慢。但比起手动对比来看，还是非常快的。值得css开发时拥有

8. phantomCSS，这个和grunt photobox类似，都用于css开发的，差别是photobox是全局观察差别，而这个是单元组件观察差别，它方便你就抓页面中某一块元素然后进行前后比较，更加注重细节上的差异，这个比较合适组件开发时候使用。

9. jshint，帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。在部署你JS前，用jshint检查一下是没错的 。

10.UglifyJS，压缩JavaScript代码，使你的JS代码可以更加快速的加载。有grunt的插件

11. browserify允许你在浏览器里面使用CMD标准模块，但本人认为它的另外一个优势是合并代码，开发时候可以把代码模块化，分缺者成很多很多小文件，然后有调理的放到相对应文件夹下，然后最后合成单一文件。本人曾经利用browserify开发代码，大大简化了的开发难度和增强了代码的质量。browserify有grunt插件，这样又减少的开发步骤。

12. Karma， google开发的一个单元测试运行器，这个自己本身不是一个单元测试框架，而是配合测试单元框架的一个工具。由于前端浏览器众多，就算你有live-reload这样自动化工具，但是还是要手动打开各种浏览器，手动把你的单元测试在各伏答薯个浏览器都运行一遍。这个工具目的是目的就是让电脑能自动化打开各种浏览器，然后把单元测试在各个浏览器中自动运行一遍，让这个步骤也能自动化了。

13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin实际上背后使用的是clean-css工具，这个工具就是用来压缩精简css的，让css文件大小更小。

❷ grunt压缩的css问价怎么解压缩

安装

1
要想使用grunt，首先必须将grunt-cli安装到全局环境中，打开控制台（注意：windows系统下请使用管理员权限打开），输入：
npm install -g grunt-cli
注意，mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令。

2
回车，命令行会出现一个转动的小横线，表示正在联网加载。加载的时间看你网速的快慢，不过这个软件比较小，一般加载时间不会很长，稍一会儿，就加载完了。你会看到以下界面。

3
要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入
“grunt”命令即可。如果生效，则会出现以下结果：
-- 可能不一样 --

END
创建一个简单的网站

1
首先，我在电脑的D盘下面建了一个“grunt_test”文件夹，里面建了三个空文件夹、两个空文档，名称如下图。（注意 Gruntfile.js 文件的首字母大写！）
devDependencies是什么意思？字面意思解释是“开发依赖项”，即我们现在这个系统，将会依赖于哪些工具来开发

2
先把package.json这个文件写一些东西
{ "name": "my", "version": "1.0.0", "devDependencies": {
}

3
接下来我们会有一系列插件的安装，他们的安装过程和grunt一样。但是他们的执行都是基于grunt的，因此才能把grunt叫做一个“构建工具”。

4
注意，这里安装grunt不再是全局安装了，需要你在控制台进入到网站或系统的具体目录下。这里我们进入 D:\grunt_test 目录下。然后输入以下命令。

5
应该第一时间打开package.json去看看，那里的“devDependencies”有什么变化。我这里的变化如下图，看看你的是不是和我的一样
然后你再看看文档目录中的文件或者文件夹有什么变化？我这里多了一个“node_moles”文件夹，其中有一个“grunt”文件夹，再其中有若干文档。这里就是存储grunt源文件的地方。

6
在控制台运行“grunt”命令。如果你得到一个warning提示，那说明grunt已经起作用了。

END
配置Gruntfile.js

1
Gruntfile.js 这个文件，肯定是为了grunt做某种配置的。按照grunt的规定，我们首先把Gruntfile.js配置成如下格式

END
Grunt插件

Contrib-jshint——javascript语法错误检查；
Contrib-uglify——压缩javascript代码
Contrib-cssmin——压缩css代码
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
使用uglify插件（压缩javascript代码）。
安装uglify插件的方式，和安装grunt是一样的。还记得grunt是怎么安装的吗？

我们在现有的“src”文件夹中新建一个“test.js”，并随便写一些代码。显然，我们无法通过双手和键盘写出压缩后的代码。

第一步，在grunt.initConfig方法中配置 uglify 的配置参数
uglify:
{ target: { files: [{ expand: true,
cwd: 'src', src: ['*.js', '!*.min.js'], ext:
'.min.js' }] }}
)};
grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.registerTask('default',
['uglify', 'cssmin']);//使用grunt命令执行

以上说的这三步已经OK了，接下来我们去试试。在控制台中运行grunt命令，
控制台将输入如下信息：
现在好像没有 -- without errors --

❸ Grunt uglify 批量压缩 总是只生成1个文件

修改 src 为：
src: ['**/*.js']

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

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的CSS压缩方法

理想的情况是只拥有一个CSS文件（如果你使用RWD以支持IE的老版本，那就需要两个CSS文件。）构建并维护几个单独的CSS文件也算合理，但在部署到产品服务器之前，你应该将它们集合在一起，并删掉那些不必要的空白区域。
Saas、LESS和Stylus等预处理器可帮你完成这些痛苦的工作。 Grunt.js、 Gulp等工具可自动化你的工作流。如果你更喜欢GUI，可借助Koala提供的免费跨平台应用。
如果你觉得这些比较麻烦，也可手动通过命令行工具将CSS文件集中在一起，如在Windows中，可使用如下代码：
在Mac/Linux中，可使用如下代码：
最终文件经过在线CSS压缩工具（如 cssminifier.com、 CSS Compressor & Minifieror等）压缩后即可运行。
最后，请记住在头部（Head）加载所有CSS，以便浏览器展示接下来的HTML元素，同时也可避免浏览器下次再重绘页面元素。