gruntjs续

gruntjs
官方教程：http://gruntjs.com

本次主要讲述Gruntfile.js配置文件在项目中的应用
配合jade、less一起使用。

项目目录包括jade文件夹、less文件夹、css文件夹、js文件夹等等
jade文件夹中包含首页、版本选择页以及提示信息页
活动首页样式变化频繁，但是jade可以实现超文本标记语言结构化，简化开发利于维护
版本选择页变化较小，一次开发，以后基本维持。
结果页及信息提示页实现结构化，主要变动标题及链接，可以通过配件tip_conf.jade文件，每次修改这个配置文件即可。

tip_conf.jade源码介绍：

title = '活动标题',
buyphone = 'http://buyphone',
buybox = 'http://buybox',
bookphone = 'http://bookphone',
bookbox = 'http://bookbox',
home = 'http://home'

 

Gruntfile.js配件文件源码：

module.exports = function(grunt) {
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        conf: {
            date: '130601',
            ocss: '<%= conf.date %>/less',
            tcss: '<%= conf.date %>/css',
            js: '<%= conf.date %>/js',
            ophone: '<%= conf.date %>/ophone/tip',
            obox: '<%= conf.date %>/obox/tip',
            tphone: '<%= conf.date %>/phone/tip/phone123456',
            tbox: '<%= conf.date %>/box/tip/box123456'
        },
        jade: {
            compile: {
                options: {
                    data: {
                        debug: false,                        
                    },
                },
                files: { // 包含首页、版本页、提示页
                    "<%= conf.date %>/index.html": ["<%= conf.date %>/kindex.jade"],
                    "<%= conf.date %>/choose.html": ["<%= conf.date %>/kchoose.jade"],
                    "<%= conf.tphone %>/AccountQustion.html": "<%= conf.ophone %>kAccountQustion.jade",
                    "<%= conf.tphone %>/buyExpire.html": "<%= conf.ophone %>kbuyExpire.jade",
                    "<%= conf.tphone %>/CodeError.html": "<%= conf.ophone %>kCodeError.jade",
                    "<%= conf.tphone %>/downOrder.html": "<%= conf.ophone %>kdownOrder.jade",
                    "<%= conf.tphone %>/joinShopCart.html": "<%= conf.ophone %>kjoinShopCart.jade",
                    "<%= conf.tphone %>/NoRegister.html": "<%= conf.ophone %>kNoRegister.jade",
                    "<%= conf.tphone %>/NoSuccess.html": "<%= conf.ophone %>kNoSuccess.jade",
                    "<%= conf.tphone %>/OnlyOne.html": "<%= conf.ophone %>kOnlyOne.jade",
                    "<%= conf.tphone %>/OnlyOne_x.html": "<%= conf.ophone %>kOnlyOne_x.jade",
                    "<%= conf.tphone %>/QueryBuy.html": "<%= conf.ophone %>kQueryBuy.jade",
                }
            }
        },
        less: {
            production: {
                options: {
                    yuicompress: true
                },
                files: {
                    "<%= conf.tcss %>/mactive.css": "<%= conf.ocss %>/active.less"
                }
            }
        },
        uglify : {
            options : {
                compress: true,
            },
            build : {
                src : '<%= conf.js %>/ac.js',
                dest : '<%= conf.js %>/ac.min.js'
            }
        },
        watch: {
            options:{
                livereload: true,
            },
            css: {
                files: ['<%= conf.ocss %>/*.less'],
                tasks: ['less', 'jade'],
            },
            uglify: {
                files: ['<%= conf.js %>/*.js'],
                tasks: ['uglify', 'jade'],
            },
            jade: {
                files: ['<%= conf.date %>/*.jade', '<%= conf.ophone %>', '<%= conf.obox %>'],
                tasks: ['jade'],
            }
        }
    });


    // 载入concat和uglify插件，分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-css');
    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-yuidoc');
    grunt.loadNpmTasks('grunt-contrib-livereload');
    grunt.loadNpmTasks('grunt-contrib-handlebars');


    // 注册任务
    grunt.registerTask('default', ['less', 'uglify', 'jade' ]);
}; 

 

运行grunt watch
当less、js、jade文件有变化时会自动编译，是不是相当方便。简化了工作流程。
以上过程只是初探阶段，欢迎一起讨论gruntjs。

附：
版本选择页
grunt