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-clinpm install grunt --save-devgrunt –versionnpm install grunt --save-dev

3.gruntjs的基本使用

構建工具gruntjs（ http://gruntjs.com/ ）使用流程外掛程式的概念package.jsonGruntfile.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 命令

源碼下載

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