requirejs壓縮

A. grunt怎樣壓縮requirejs中各模塊js

安裝 grunt-contrib-requirejs
npm i --save-dev grunt-contrib-requirejs

配置 Grantfile
首先我們來看下項目目錄

src 是每個頁面的依賴文件
moles 和 lib 是一些模塊和庫
dist 是合並壓縮後的文件
在 Gruntfile 中首先得到需要處理的文件列表，並創建一個空對象，用來裝requirejs的配置
var files = grunt.file.expand('static/js/src/*.js');
var requireOptions = {};

然後遍歷這個文件列表數組，得到js文件的名稱：
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
}

接下來為每個js文件配置一個任務，任務名稱就是js的文件名稱：
files.forEach(function (file) {
requireOptions[filename] = {
options: {
baseUrl: 'static/js',
paths: {
jquery: 'lib/jquery.min',
lrz: 'lib/lrz.all.bundle',
zepto: 'lib/zepto.min',
ajax: 'moles/ajax',
validators: 'moles/validators',
page: 'moles/mixins/to_page',
dialog: 'moles/mixins/toggle_login_dialog',
},
optimizeAllPluginResources: true,
name: 'src/' + filename,
out: 'static/js/dist/' + filename + '.js'
}
};
}

接著初始化 grunt 配置並載入並注冊任務
grunt.initConfig({
requirejs: requireOptions
})

grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('require', ['requirejs']);

到這里 requirejs 的配置部分就結束了，在命令行輸入 grunt require 就會看到 static/js/dist 目錄下面有東西蹦出來了，而且全部都是合並後並壓縮好的。
在html頁面中只需要：
<script src="static/js/require.js"></script>
<script src="static/js/dist/index.js"></script>

就能成功載入了。

增加js文件的版本號
瀏覽器有時會對載入過的js或css進行緩存，如果你的某些js依賴發生改變，那麼就可能發生錯誤，解決辦法是在文件後面增加查詢字元串，例如 a.js?v=dsd712sd
那麼如何控製版本，首先我們肯定想到用 new Date() ，但是如果每次發布都讓瀏覽器重新載入（盡管有些文件根本就沒有改變），難免會造成浪費。正確的方案是根據文件內容生成MD5值來作為版本號，這樣當文件沒有改變時，hash就不會變。
那麼如何自動解決版本號的問題，我們可以用到 asset-cache-control 這個grunt插件
首先安裝：
npm i --save-dev asset-cache-control

asset-cache-control 的用法個很簡單，只要設置一個源文件，再設置html文件的路徑就可以了
grunt.initConfig({
cache: {
demo: {
assetUrl: 'js/demo.js',
tmp: ['demo.html']
}
}
})

注意的是：html文件中需要引入 js/demo.js
<script src='js/demo.js'></script>

然後載入和注冊 asset-cache-control 插件
grunt.loadNpmTasks('asset-cache-control');
grunt.registerTask('cache', ['cache']);

接著在命令行敲 grunt cache 就會發現 index.html 中的 script 標簽加上了查詢字元串。
<script src='js/demo.js?t=92e26c5d'></script>

對每個js文件配置 cache 的任務：
var files = grunt.file.expand('static/js/src/*.js');
var cacheOptions ={};
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
cacheOptions[filename] = {
assetUrl: 'static/js/dist/' + filename +'.js',
files: {
'tmp': [filename+'.php']
}
}
});

檢測每個文件的變化，自動執行任務
用到 grunt-contrib-watch 這個官方組件
在 grunt.initConfig 中配置：
watch: {
files: ['static/js/src/*.js','static/js/moles/*.js'],
tasks: ['requirejs', 'cache'],
options: {
spawn: false
}
}

這樣，當你修改 static/js/src/ 和 static/js/moles/ 下的所有js文件時，就會執行 requirejs 和 cache 任務。

完整配置清單
mole.exports = function (grunt) {
var files = grunt.file.expand('static/js/src/*.js');
var requireOptions = {};
var cacheOptions ={};
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
requireOptions[filename] = {
options: {
baseUrl: 'static/js',
paths: {
jquery: 'lib/jquery.min',
lrz: 'lib/lrz.all.bundle',
zepto: 'lib/zepto.min',
ajax: 'moles/ajax',
validators: 'moles/validators',
page: 'moles/mixins/to_page',
dialog: 'moles/mixins/toggle_login_dialog',
},
optimizeAllPluginResources: true,
name: 'src/' + filename,
out: 'static/js/dist/' + filename + '.js'
}
};
cacheOptions[filename] = {
assetUrl: 'static/js/dist/' + filename +'.js',
files: {
'tmp': [filename+'.php']
}
}
});

grunt.initConfig({
requirejs: requireOptions,
cache: cacheOptions,
watch: {
files: ['static/js/src/*.js','static/js/moles/*.js'],
tasks: ['requirejs', 'cache'],
options: {
spawn: false
}
}
});

grunt.loadNpmTasks('asset-cache-control');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('require', ['requirejs','cache'])
};

另外，瀏覽器載入一個大文件比載入n個小文件的效率要高很多，所以模塊的合並對性能也有很大的提高。

B. webpack到底是通過什麼方式在瀏覽器上載入的呢

Gulp應該和Grunt比較，他們的區別我就不說了，說說用處吧。Gulp / Grunt 是一種工具，能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說，就是使用Gulp/Grunt，然後配置你需要的插件，就可以把以前需要手工做的事情讓它幫你做了。

說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型，browserify / webpack 是另一種類型。

seajs / require : 是一種在線"編譯" 模塊的方案，相當於在頁面上載入一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、mole 這些東西。也就實現了模塊化。

browserify / webpack : 是一個預編譯模塊的方案，相比於上面 ，這個方案更加智能。沒用過browserify，這里以webpack為例。首先，它是預編譯的，不需要在瀏覽器中載入解釋器。另外，你在本地直接寫JS，不管是 AMD / CMD / ES6 風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。
這樣就知道，Gulp是一個工具，而webpack等等是模塊化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

C. web前端開發需要學習什麼知識

首先對於Web前端初學者而言，HTML和CSS是需要掌握的內容。

HTML稱為超文本標記語言，是一回種標識性的語答言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

CSS層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

(3)requirejs壓縮擴展閱讀：

例如，在網上商店中，用戶反復觀察和選擇商品，購買商品，瀏覽一系列網頁，收集所需信息，支付相應費用，最後下訂單，也可以是「軟體升級向導」，指導用戶完成下載和安裝新軟體的過程，也可以是基於Intranet的報價或銷售報告生成工具。

所有這些均不同於「標准」的Web網站。 常規網站使用一系列菜單或導航欄在預定路徑中漫遊該網站。 但是，成為Web應用程序不僅僅是下級控制的導航器。 在網站上自由漫遊時，可以進行無狀態和匿名訪問，但是通常不接受Web應用程序。

D. 自學前端，前端開發的學習路線是什麼

自學前端其實很辛苦，需要有強大的自製力和堅持下去的學習心，並且做好詳細的學習規劃嚴格執行；如果你想學前端，下面的學習路線或許對你有幫助。

前端完整學習路線

第一階段:

HTML CSS:HTML進階、CSS進階、div css布局、HTML css整站開發。

JavaScript基礎:Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。

JS基本特效:常見特效、例如:tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。

JS高級特徵:正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎。

JQuery:基礎使用懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段:HTML5和移動Web開發

HTML5:HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas。

CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。

Bootstrap:響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。

移動Web開發:跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。

第三階段:HTTP服務和AJAX編程

WEB伺服器基礎:伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。

PHP基礎:PHP基礎語法、使用PHP處理簡單的GET或者POST請求。

AJAX上篇:Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。

AJAX下篇:JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

第四階段:面向對象進階

面向對象終極篇:從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。

面向對象三大特徵:繼承性、多態性、封裝性、介面。

設計模式:面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。

第五階段:封裝一個屬於自己的框架

框架封裝基礎:事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。

框架封裝中級:運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。

框架封裝高級和補充:JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。

第六階段:模塊化組件開發

面向組件編程:面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。

面向模塊編程:AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。

第七階段:主流的流行框架

Web開發工作流:GIT/SVN、Yeoman腳手架、NPMer依賴管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。

常用庫:React.js、Vue.js、Zepto.js。

第八階段:HTML5原生移動應用開發

Cordova:WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。

Ionic:Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。

React Native:React Native簡介、React Native環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。

HTML5 :HTML5 中國產業聯盟、HTML5 Plus Runtime環境、HBuilder開發工具、MUI框架、H5 開發和部署。

第九階段: Node.js全棧開發:

快速入門:Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。

核心模塊和對象:全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操做。

祝你學有所成！