gruntjs续-阿里云开发者社区

gruntjs续

2023-08-02 49

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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' ]);
};