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']);

};