2.精通前端系列技術之seajs和gruntJs結合開發（三）

1.咱們先來了解下模塊化歷史

模塊化歷史
nodeJS的出現（http://nodejs.org/）
commonJS規範（http://www.commonjs.org/）

瀏覽器JS的模塊化？
AMD規範（http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition）
requireJS庫（http://requirejs.org/
CMD規範
Seajs採用的

咱們一般開發前端的時候分爲線下和線上，線下直接開發調試腳本，而線上是不少個腳本文件合併成一個壓縮加密，減小http請求，這個時候咱們須要構建工具

2.咱們開始瞭解構建工具安裝流程

構建工具
gruntjs（ http://gruntjs.com/ ）
安裝流程
先安裝nodejs和npm(包管理工具)
npm install -g grunt-cli
npm install grunt --save-dev
grunt –versionnpm install grunt --save-dev

3.gruntjs的基本使用

構建工具
gruntjs（ http://gruntjs.com/ ）
使用流程
插件的概念
package.json
Gruntfile.js

 1.cmd進入目錄

2.npm install(package.json引用哪些插件就下載哪些插件)

 3.gruntfile.js

module.exports = function(grunt) {
    
    grunt.initConfig({
        
         pkg: grunt.file.readJSON('package.json'),
         
         concat : {
             webqq : {
                 files : {
                     'dist/main.js' : ['main.js','drag.js','scale.js','range.js']
                 }
             }
         },
         uglify : {
             webqq : {
                 files : {
                     'dist/main.min.js' : ['dist/main.js']
                  }
             }
         }
        
    });
    
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

      grunt.registerTask('default', ['concat','uglify']);

    
};

 4.敲入cmd命令：grunt 命令

源碼下載