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

 

posted @ 2013-12-17 10:26  小玉西瓜  阅读(511)  评论(0编辑  收藏  举报