gruntjs 架构

2013-12-03 00:00:00 by 【6yang】, 1150 visits, 收藏 | 返回

http://www.cnblogs.com/kuikui/archive/2013/05/26/3100449.html

gruntjs
gruntjs是构建前端可维护性的项目，如自动化、文件压缩、合并及单元测试等等。

关于package.json和Gruntfile.js基础介绍

1、在项目的当前目录下，新建packjson.json文件

{
    "name":"mtest",
    "version":"0.1.0",
    "engines": {
        "node": ">= 0.8.0"
    },
    "dependencies": {
        "async": "~0.1.22",
        "coffee-script": "~1.3.3",
        "colors": "~0.6.0-1",
        "dateformat": "1.0.2-1.2.3",
        "glob": "~3.1.21",
        "underscore.string": "~2.2.0rc",
        "which": "~1.0.5",
        "jade":"~1.3.3",
        "less":"~0.30.0"
    },
    "devDependencies": {
        "grunt": "~0.4.0",
        "grunt-contrib-jshint": "~0.1.1",
        "grunt-contrib-uglify": "~0.1.2",
        "grunt-contrib-concat": "~0.1.1"
    }
}

备注：

基础模板：grunt init:jquery
强制覆盖基础模板：grunt init:jquery --force

2、在项目的当前目录下，新建Gruntfile.js文件

module.exports = function(grunt) {
    //配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        concat: {
            css: {
                src: ['src/style/lib/*.css'],
                dest: 'build/style/basic.css'
            },
            js: {
                src: 'src/js/lib/*.js',
                dest: 'src/js/base.min.js'
            }
        },
        cssmin: {
            css: {
                src: 'build/style/base.css',
                dest: 'build/style/base.min.css'
            }
        },
        jade: {
            release: {
                options: {
                    data: {
                        debug: false
                    },
                    compiler: 'compiler',
                    pretty: true
                },
                files: {
                    "view/test.html": "view/test.jade"
                }
            }
        },
        less: {
            production: {
                options: {
                    yuicompress: true
                },
                files: {
                    "build/style/result.css": "build/style/source.less"
                }
            }
        }
    });
        
    //载入插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-css');
    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-contrib-less');
    
    //默认任务
     grunt.registerTask('default', ['uglify' ,'concat', 'cssmin', 'jade', 'less']);
}

备注：
配置、载入插件、任务

配置：

js文件压缩：uglify
css文件压缩：cssmin
js和css文件合并：concat
jade模板的使用：jade
less模板的使用：less
可以在option为其设置相应参数

载入对应的插件：

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-less');

任务：
grunt.registerTask('default', ['uglify' ,'concat', 'cssmin', 'jade', 'less']);

运行：
在当前项目下执行grunt命令

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=1325&cid=15

share

技术标签 TAGS

专业技术精选

首页 > 技术 > nodejs学习

gruntjs 架构

JavaScript 项目构建工具 Grunt 实践：合并文件

gruntjs

图片原图