Gruntjs提高生产力（三）

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

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