以下例子来自真实项目,有所删减

grunt-test project

目录结构如下

一我的目的:

1.在src-dev目录中开发最终产出于src目录

2.src-dev中的index目录相当于一个widget

二准备工作 

完成这项工作我需要那些步骤才能做到呢。

1.需要先准备好合并压缩好的css(common/reset.css+index/c.css)合并压缩放置与一个零时文件夹中待用。

2.其次压缩index/j.js放置于零时文件夹中。

3.再者把css、js、tpl(index/t.html)inline到layout(index.html)中

三编写gruntfile

开始编写gruntfile.js/gruntfile.coffee

module.exports = function(grunt) {

    var rt ='src-dev/',//工作根目录
indexDir = rt + 'index/',//widget目录
tempDir = rt + 'temp/';//零时文件夹 console.log(grunt.option('keys'));//获取从命令行传递过来的参数如 grunt --keys=1 日志输出1 这个很有用后面说明 grunt.file.exists(tempDir) && grunt.file.delete(tempDir);//如果存在临时文件则删除,清楚以前生成的文件
grunt.file.mkdir(tempDir);//创建新的零时文件夹 grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//可以用这种方法再读取一个json(config.json)文件当配置,下面的赋值就没有必要了
rt : rt,//运行时只能获取自身的变量,所以需要这样处理
temp: tempDir,
index : indexDir,
clean: {
build: ['<%=temp%>']//<%=temp%> gruntjs的模板类似于宏,这样即使是key也可以轻松处理
},
jsdoc : {
dist : {
src : '<%=index%>doc.js',//源文件夹
options : {
destination : '<%=rt%>../out/'//输出文件夹
}
}
},
cssmin: {
//debug : true,
combine: {
files: {
'<%=temp%>c.min.css': ['<%=rt%>common/reset.css', '<%=index%>c.css']//输出文件夹:目标文件
}
}
},
includes : {//依赖layout文件,请看index/index.html
files: {
//debug: true,
src: ['<%=rt%>**/*.html'],//源文件
dest: '<%=temp%>',//输出文件
cwd: '.',//工作目录
flatten: true,//消除文件路径,/a/b/c.html --> c.html
options: {
banner: ''//在组合好的代码最前面插入内容,html不建议这么做
}
}
},
watch : {//需要监听的文件,如有变化则调用tasks
files : ['<%=index%>j.js','<%=index%>*.html' ,'<%=index%>c.css'],
tasks : ['clean', 'uglify', 'cssmin', 'includes', 'copy', 'clean'],//注意一个任务key用task,value用'clean',多个任务key用task,value用['clean']
//debug : true,
options: {
livereload: true //这里配置的化打开liveload插件文件变化就会刷新页面
}
},
uglify: {
dist: {
files: {
'<%=temp%>j.js': ['<%=index%>*.js']//没有要注意的地方
}
}
},
copy: {
main: { files: [
{
flatten: true,//同includes
expand: true,//递归所有目录
filter: 'isFile',
src: ['<%=temp%>index.html'],
dest: '<%=rt%>../src/'
},
//{src: ['<%=temp%>doc/**'], dest: '<%=temp%>../'},//grunt-jsdoc没装成功,没有用到。直接用jsdoc输出的,大家可以试试contrib-yuidoc
]
}
} });   //加载用到的插件,加载了没用到可以,用到了没加载。。。。。。
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-includes');
grunt.loadNpmTasks('grunt-devtools');//后面特别给出 //注册任务 命令行中grunt 就会执行defult
   //grunt watch 就会执行watch 同理
   grunt.registerTask('build', ['clean', 'uglify', 'cssmin', 'includes', 'copy', 'clean']);
grunt.registerTask('default', ['build']); };

重要名词:cwd 工作文件夹

gruntfile.js创建好以后

1.开发中只要grunt watch 然后打开浏览器中的livepage

2.修改监听文件,grunt就会自动执行命令并且刷新文件(这个过程要几秒中稍慢)

 四grunt可视化工具

1.chrome 商店中安装grunt f12打开发人员工具条,console面板旁会出现一个grunt的tab

2.点击help会去grunt-devtools的github主页

npm install -g grunt-devtools

3.在gruntfile.js 添加

grunt.loadNpmTasks('grunt-devtools');

4.安装好以后在命令行执行

grunt devtools

用浏览器预览项目中的文件夹,奇迹发生了!开发工具中的grunt面板可以正常使用。

gruntfile中的任务都会被列出,只要用鼠标操作就可以了,日志也会被输出在grunt的面板中。

5.简化操作

windows 可以把执行devtools的命令拷贝创建为一个bat文件直接点击执行

linux-like 可以拷贝创建一个sh文件,用命令行执行sh

五输出api文档

由于grunt-jsdoc没安装成功,我直接用jsdoc输出的文档。大家可以用代理安装或者使用grunt-contrib-yuidoc

结果预览

1.会以类名生成一个独立的文件Hua.html

2.采用jsdoc格式编写的注视会被安类别输出为一个列表,常量不单独列出,会被包含在文档内。

3.已render方法为例

4.js也会被输出在独立的文档中

是不是很酷

以前:编码--修改--切换程序--刷新--查看

现在:编码--修改--查看

如果有两个显示器那真是福音啊!

例子zip

Gruntjs提高生产力(三)的更多相关文章

  1. Gruntjs提高生产力(四)

    思考: 1.grunt以工程为单位安装插件? 如果有新工程就要重新安装插件或者把安装好的插件拷贝过去.这样很麻烦,解决方案是需要用grunt的项目统一放在grunt项目中. 2.每次需要针对项目编写g ...

  2. Gruntjs提高生产力(二)

    摆脱混乱的html文件中开发,拥有development与product模式是我们梦寐以求的. 我买的需求是: 1.产出一定格式的目录结构,以供日常开发使用,脚手架功能. 2.在开发模式环境中我们按照 ...

  3. Gruntjs提高生产力(一)

    gruntjs是一个基于nodejs的自动化工具,只要熟悉nodejs或者又一定js经验就可以熟练应用. 1. 安装 a. 保证已安装了nodejs,并带有npm b.安装客户端命令行工具,grunt ...

  4. [置顶] 提高生产力:开源Java工具包Jodd(Java的”瑞士军刀”)

    官方网站:http://jodd.org/ 下载地址:http://jodd.org/download/index.html Jodd=tools + ioc + mvc + db + aop + t ...

  5. [置顶] 提高生产力:Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  6. 提高生产力:开源Java工具包Jodd(Java的”瑞士军刀”)

    官方网站:http://jodd.org/ 下载地址:http://jodd.org/download/index.html Jodd=tools + ioc + mvc + db + aop + t ...

  7. 提高生产力:文件和IO操作(ApacheCommonsIO-汉化分享)

    复制.移动.删除.比较.监控.文件读写 等文件和IO操作是编程中比较常用的功能.        幸运的是,Apache Commons IO等开源组件已经帮我们实现了.        我们可以不用重复 ...

  8. 提高生产力:SpringMVC中,使用扩展数据类型TypedMap接收Web请求参数

    在Web项目中,如果前端MVC框架使用的是SpringMVC,可以使用Map接收前端请求参数,比bean要方便很多. 尤其是SpringMVC和Mybatis一起用的时候,用Map大大减少了需要的be ...

  9. 提高生产力:Web前端验证的标准化

    统一验证标准,减少重复劳动,提高生产力. 当公司内部有多个Web项目的时候,统一验证标准就很有必要了.统一不同项目的验证规则,比如 同为用户名 使用同一套标准,甚至用户名和机构名等也使用同一套标准.( ...

随机推荐

  1. docker——镜像(image)

    镜像相关命令一览表: docker images docker tag docker inspect docker history docker search docker pull/push doc ...

  2. 斐讯面试记录—三线程交替打印ABC

    package cn.shenzhen.feixun; public class PrintABC extends Thread{ private String name; private Objec ...

  3. hdu6194 string string string

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6194 题目: string string string Time Limit: 2000/10 ...

  4. HTTP服务器(3)

    功能完整的HTTP服务器 导语 这个一个功能完备的HTTP服务器.它可以提供一个完整的文档输,包括图像,applet,HTML文件,文本文件.它与SingleFileHttpServer非常相似,只不 ...

  5. 20145316 《Java程序设计》第8周学习总结

    20145316 <Java程序设计>第8周学习总结 教材学习内容总结 NIO&NIO2 NIO使用频道(channel)衔接数据节点,对数据区的标记提供了clear(),rewi ...

  6. springmvc获取bean

    1.普通注解方式获取 2.springcontextholder获取 ChatHistoryService chatHistoryService = SpringContextHolder.getBe ...

  7. Linux 日志分析工具(logwatch)安装及使用

    Linux 日志分析工具(logwatch)安装及使用 日志是非常重要的系统文件,管理员每天的重要工作就是分析和查看服务器的日志,判断服务器的健康状态.但是日志管理又是一项非常枯燥的工作,如果需要管理 ...

  8. centos6.7安装lamp

    1.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport ...

  9. GoEasyWeb实时推送

    GoEasyWeb实时推送,轻松实现实时消息推送. Web页面订阅(约5行代码),服务器端推送(2行代码)就可以轻松实现,而且在高并发时消息推送稳定. 自己完全可以只花五分钟写出属于自己的第一个实时推 ...

  10. 《Java程序设计》实验4

    20145318 <Java程序设计>实验4 实验内容 安装Android Studio 运行安卓AVD模拟器 使用Android运行出模拟手机并显示自己的学号 实验过程 安装Androi ...