Gruntjs随笔

Q：Grunt为何物？

A：一个专为JavaScript提供的构建工具。

Q：啥是构建工具？

A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。

Q：grunt是如何工作的？

A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。 就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。 这些任务比如：

• clean:删除临时文件

• uglify:压缩

• qunit:测试

• concat:合并

 

1、建立 package.json 文件（内容如下），然后运行 npm install 安装其相关依赖的包。

{
    "name": "the-project-of-name",
    "version": "0.0.1",
    "author": "Jankerli <jankerli@gmail.com>",
    "description": "the-project-of-description",
    "dependencies": {
        "grunt": "*",
        "grunt-contrib-less": "*",
        "grunt-contrib-watch": "*",
        "grunt-contrib-uglify": "*",
        "grunt-contrib-cssmin": "*",
        "grunt-contrib-copy": "*"
    }
}

2、建立 Gruntfile.js 文件（如下内容请根据具体项目稍作修改），然后运行 grunt，就会在其根目录下看到 dest 文件夹了，去看看你需要的文件是否都在里面了？

module.exports = function (grunt) {
 
    grunt.initConfig({
 
        pkg: grunt.file.readJSON('package.json'),
 
        // 编译 LESS 文件
        less: {
            compile: {
                files: {
                    'assets/css/app.css': 'assets/css/app.less'
                }
            }
        },
 
        // 压缩 CSS 文件
        cssmin: {
            options: {
                report: 'gzip'
            },
            combine: {
                files: {
                  'assets/css/app.min.css': 'assets/css/app.css'
                }
            }
        },
 
        // 压缩合并 JS 文件
        uglify: {
            options: {
                report: 'gzip',
                mangle: true, // Specify mangle: false to prevent changes to your variable and function names.
                banner: '/** \n' +
                        ' * -------------------------------------------------------------\n' +
                        ' * Copyright (c) 2013 Jankerli, All rights reserved. \n' +
                        ' * http://www.jankerli.com/ \n' +
                        ' *  \n' +
                        ' * @version: <%= pkg.version%> \n' +
                        ' * @author: <%= pkg.author%> \n' +
                        ' * @description: <%= pkg.description%> \n' +
                        ' * ------------------------------------------------------------- \n' +
                        ' */ \n\n'
            },
            myTarget: {
                files: {
                    'assets/js/lib/libs.min.js': ['assets/js/lib/jquery-1.9.1.min.js',
                                                  'assets/js/lib/underscore-min.js',
                                                  'assets/js/lib/backbone-min.js'],
 
                    'assets/js/app.min.js': ['assets/js/app.js',
                                             'assets/js/tpls.js',
                                             'assets/js/view.js',
                                             'assets/js/router.js']
                }
            }
        },
 
        // 复制文件，打包到 dest 文件夹目录下
        copy: {
            main: {
                files: [
                    {src: 'index.html', dest: 'dest/index.html'},
                    {src: ['assets/images/**'], dest: 'dest/'},
                    {src: ['assets/css/app.min.css'], dest: 'dest/'},
                    {src: ['assets/js/lib/libs.min.js'], dest: 'dest/'},
                    {src: ['assets/js/app.min.js'], dest: 'dest/'}
                ]
            }
        },
 
        // 监控 LESS 文件
        watch: {
            scripts: {
                files: ['assets/css/*.less'],
                tasks: ['less', 'cssmin']
            }
        }
 
    });
 
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-copy');
 
    grunt.registerTask('default', ['less', 'cssmin', 'uglify', 'copy']);
 
};