grunt打包工具小记(一)

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/binxchen/p/6528692.html

文章标签：

#javascript #ui #前端 #ViewUI

本文介绍grunt作为前端自动化工具的应用，包括文件压缩、合并及语法检查等基本操作，并演示如何通过配置package.json和gruntfile实现自动化任务，同时涉及grunt与requirejs的结合使用。

grunt打包工具小记(一入门)

首先感谢推荐叶小钗同学,顺带记录下.

grunt

是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：

压缩文件
合并文件
简单语法检查

全局安装之后,在需要打包的目录下使用

grunt

grunt使用package.json来配置所需要的信息
用gruntfile来
1.读取package信息
2.插件加载,注册任务,运行任务(grunt对外接口)

module.exports = function (grunt) {
  // 项目配置
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),//package入口
    concat: {
      options: {
        separator: ';'//表明头部的注释,以及分割上下JS文件
    },
    dist: {
      src: ['src/zepto.js',   'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }//资源路径
      },
    uglify: {//压缩
        build: {
          src: 'dest/libs.js',
          dest: 'dest/libs.min.js'
    }
  }
    });
    //插件注册
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 默认任务
    grunt.registerTask('default', ['concat', 'uglify']);//运行任务合并以及压缩
}

以上是普通写法
接下来是与requirejs的配合(顺便记录下requirejs的用法)
main.js

    require.config({
      baseUrl: '',//默认路径,还有一种写法是写成data-main=""
      shim: {     //这里有一点不懂,主要是不知道所说的非AMD写法是怎么样的,但是有一个很好的模版是:
        $: {
            exports: 'zepto'
          },
        _: {
            exports: '_'
            },
        B: {
            deps: [
            '_',
            '$'
          ],
        exports: 'Backbone'
      }
      },
      paths: {
        '$': 'src/zepto',
        '_': 'src/underscore',
        'B': 'src/backbone'
        }
      });
      requirejs(['B'], function (b) {
      });

这里是一个其他人的main.js的模版
主要是jquery-UI的部分功能插件似乎没有按照AMD的写法,以及必须依赖于jquery,所以在这里写入

      shim: {
              'jquery.ui.core': ['jquery'],
              'jquery.ui.widget': ['jquery'],
              'jquery.ui.mouse': ['jquery'],
              'jquery.ui.slider':['jquery'],
              "zepto.touch":"Zepto",
              "zepto.fx":"Zepto"
          }

map的用法

  /*模块规则配置*/
    map:{
        '*': {
            'jquery': 'jquery-private',
            'tomLib':'tomLib'
        },
        "jquery-private":{
            "jquery":"jquery"
        }
    }

设置requirejs的配置

    {
      "requirejs": {
        "main": {
          "options": {
            "baseUrl": "",
            "paths": {
              "$": "src/zepto",
              "_": "src/underscore",
              "B": "src/backbone",
              "Test": "src/Test"
            },
            "web": {
              "include": [
                "$",
                "_",
                "B",
                "Test"
              ],
              "out": "dest/libs.js"
            }
          }
        }
      }
    }

然后grunt build
最后目录