首页 > 代码库 > 简单使用grunt工具合并压缩js和css

简单使用grunt工具合并压缩js和css

2024-09-29 14:38:02   219人阅读

    前段时间因为项目中的报表写了一个Jquery插件，开源到github上，参考以往大神们写的插件的姿势，决定搞了像模像样一点。言归正传。前端工程师对这些工具：Node,bower,grunt,npm这些工具应该都很熟悉。今天就简单介绍一下grunt的用法。

grunt的介绍及安装请看着：getting-started，中文文档，写的也比较详细。

一个完整grunt项目小包含以下模块或配置文件

  • npm:node的包管理器，管理（安装）相关插件
  • grunt-cli:执行grunt任务的工具，但是注意安装了grunt-cli并不意味着安装了grunt，因为grunt是具体包含在项目中的，npm会更具package.json中的插件信息自动下载到grunt项目目录，通常包含在node_modules目录中。
  • package.json:插件及项目配置信息文件。
  • Gruntfile.js grunt任务的定义配置文件。

定义 一个简单的Gruntfile.js：

module.exports = function (grunt) {


    grunt.initConfig({

        // 从自定义的json配置文件读取信息，方便后面应引用
        pkg: grunt.file.readJSON("example.jquery.json"),

        // 引用上面读出来的信息定义一个版权信息头，其实就是用变量拼接一段字符串，后面合并压缩的时候就可以使用这个版权信息
        meta: {
            banner: "/*\n" +
            " *  <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" +
            " *  <%= pkg.description %>\n" +
            " *  <%= pkg.homepage %>\n" +
            " *\n" +
            " *  Made by <%= pkg.author.name %>\n" +
            " *  Under <%= pkg.licenses[0].type %> License\n" +
            " */\n"
        },

        // 定义一个合并js的任务，只不过这里只有一个js文件，只是简单的拷贝并加上版权信息头
        concat: {
            dist: {
                src: ["src/jquery.example.js"],
                dest: "dist/jquery.example.js"
            },
            options: {
                banner: "<%= meta.banner %>"
            }
        },

        // 定义一个js语法检查的任务
        jshint: {
            files: ["src/jquery.example.js"],
            options: {
                jshintrc: ".jshintrc"
            }
        },

        // 定义一个压缩js的任务，并加上版权信息在头部
        uglify: {
            my_target: {
                src: ["dist/jquery.example.js"],
                dest: "dist/jquery.example.min.js"
            },
            options: {
                banner: "<%= meta.banner %>"
            }
        },

    });

    //加载(grunt)
    require(‘load-grunt-tasks‘)(grunt);
    //注册任务，主要在更目录执行grunt就能执行该任务
    grunt.registerTask("default", ["jshint", "concat", "uglify"]);
};

 然执行如下命令：

#将命令行的当前目录转到项目的根目录下。
#执行npm install命令安装项目依赖的库。
#执行 grunt 命令。

npm install
grunt

 

简单使用grunt工具合并压缩js和css


联系
我们