grunt打包工具小记(一)

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

而后接下来的部分有些是关于node的,因此下次再接着写. 主要是如今已经0:56了,又困又累,小偷懒一下吧