grunt打包工具小記(一)

時間 2019-11-18

標籤 grunt 打包工具欄目 Node.js 简体版

原文原文鏈接

grunt打包工具小記(一入門)

首先感謝推薦葉小釵同窗,順帶記錄下.html

grunt

是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：前端

壓縮文件

合併文件

簡單語法檢查

全局安裝以後,在須要打包的目錄下使用node

gruntjquery

grunt使用package.json來配置所須要的信息
用gruntfile來
1.讀取package信息
2.插件加載,註冊任務,運行任務(grunt對外接口)web

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.jsjson

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,因此在這裏寫入ide

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

map的用法grunt

/*模塊規則配置*/
    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
requirejs