gruntjs 架构

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

 

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

http://www.cnblogs.com/lhb25/archive/2013/01/31/grunt-for-javascript-project-b.html
 

gruntjs


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") %> */\n'
            },
            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命令
分享到:
share

    图片原图

    loading

    loading