Gruntjs提高生产力（二）

 

摆脱混乱的html文件中开发，拥有development与product模式是我们梦寐以求的。

 

我买的需求是：

1.产出一定格式的目录结构，以供日常开发使用，脚手架功能。
2.在开发模式环境中我们按照文件类型不同分开开发，甚至html也分成小的区块widget化利于协作开发和维护，产出时合并成一个html，外联资源inline化。
3.在编码过程中实时保存并自动刷新浏览器，可以查看结果。
4.编码过程中进行代码检查，单元测试。
5.产出环境我们把这些碎片文件按照逻辑顺序压缩合并打包到一起组合成html，减少请求和代码体积。
6.上线后生成开发文档。

grunt 有没有这样的能力呢，接下来我们一起探索。

 

1.脚手架功能

grunt-init插件

npm install -g grunt-init

装好后要安装模板

git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin

详细

自己也可以根据要求创建自定义模板。

 

2.include功能

grunt-incoludes插件 （第三方）

npm install grunt-includes

 

include "content.html"  //注意指令前后不要添加任何符号,会影响正则匹配（本人在最后面添加了一个;被卡了很久）　　

详细 

 

3.刷新浏览器

a.自动刷新功能

目前来说只实验了chrome浏览器，有关刷新的插件有两款。

 

livepage

 

livereload

 

这两款插件在chrome store中可以找到，都可以实现修改文件就刷新浏览器的功能。大家可以看看介绍，自行选择。

我选择livepage，因为启动后比较醒目。

b.自动保存我用的是webstorm 。。。。。所以没有去找这个功能。

 

4.

a.代码检查

grunt-contrib-csslint

grunt-contrib-jshint

b.单元测试

grunt-contrib-qunit

 

5.压缩、打包

npm install grunt-contrib-cssmin//css压缩

　　详细

npm install grunt-contrib-uglify//注明的js压缩工具

　　详细

npm install grunt-contrib-imagemin//图片压缩

　　详细

npm install grunt-contrib-compress//打压缩包

　  详细

6.产出文档

grunt-jsdoc （git被墙了，要用代理才能装）

npm install jsdoc@"<=3.3.0"

　  详细

contrib-yuidoc

 

npm install grunt-contrib-yuidoc

     详细

jsdoc的文档请移步

http://usejsdoc.org/

 

7.常用插件

contrib-clean 清理文件夹

npm install grunt-contrib-clean

   详细

contrib-copy 拷贝文件夹

npm install grunt-contrib-clean 

   详细

这样说来grunt完全能够满足我们日常中的需求。

 

怎样获取自己想要的插件呢？

　　1.grunt官网插件的名字都很明了，ctrl+f直接搜

　　2.npm 使用关键字搜索

　　3.github 

　　4.chrome商店，会找到意想不到的好东西

 

 

 

 -----

　　发现插件还蛮多的，写了不少。约定好的实例讲解只能放到下一讲了。