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。
附：
