seajs壓縮

⑴ gulp模塊為什麼不支持復制粘貼

之前的項目一直採用grunt來構建，然後用requirejs做模塊化，requirejs官方有提供grunt的插件來做壓縮合並。現在的項目切到了gulp，模塊化用起了seajs，自然而然地也想到了模塊合並壓縮的問題。 然後一開始在解決這個問題的時候，並不是很順利，在npm上並沒有那種特別流行的專門用來做seajs合並壓縮的gulp插件，雖然在seajs的github上也看了不少的issue，但是大多數都是只能將所有的模塊文件合並成一個總的文件，這對於單頁面的應用來說肯定沒有問題，但是對於多頁面的應用而言，顯然就違背了模塊化思想中按需載入的核心，所以我想要的是一個能夠根據我每個頁面各自所依賴的模塊來按需合並的方法。 這個按需合並的意思，一方面是只合並一個頁面所依賴的那些模塊，另一方面是，還能過濾掉某些模塊不參與合並，考慮這個的原因在於有些模塊，比如jquery等，都屬於第三方依賴的庫，可能文件比較大，最重要的是你幾乎不會去改動它的代碼，所以這些模塊不合並到頁面的js中，會有助於更好地利用瀏覽器緩存。本文介紹一個簡單可行的辦法，來做基於gulp構建的中小型項目中的seajs合並壓縮。 註：為了說明，seajs合並後的效果，本文提供了一個演示demo，它有兩個頁面：login/liuyunzhuge/blog/tree/master/seajs 1/seajs/seajs/issues/426。 gulp-seajs-concat做合並的時候，就很簡單了，只要告訴它一個base選項即可，這個base選項跟js/common.js中base選項保持一致。因為gulp-seajs-concat根據base和transport之後的模塊，就能找到它所依賴的其它模塊文件。 4）頁面中使用main js時要採用這種方式： use的參數名稱，必須跟合並之後的main js的主模塊ID保持一致。比如js/app/login.js合並之後是這個樣子： 第一個define對應的模塊就是合並後文件內的主模塊，紅框的內容就是該主模塊的id，seajs use這個模塊的時候，參數名稱必須和這個id一致。否則seajs即使成功的載入到了這個文件，也不會執行任何模塊內的代碼。因為seajs有一個規則：ID 和路徑匹配原則，其中有點跟這個相關，就是：當seajs use到一個文件內包含多個模塊時，會根據use的參數名來尋找這個文件內的主模塊，只有它們完全匹配，才能找得到。 5）壓縮混淆：使用gulp-uglify： 但是要注意那個mangle，必須把require exports mole排除掉，否則會引發一些意外的問題。 2. 本文小結 本文內容雖然很簡單，但是在剛切到gulp和seajs的時候，還是費了不少時間才把本文的問題解決，雖然在准備demo的時候進展地比我當時的情況要順利的多…不管怎麼樣，希望本文的內容多多少少能幫助到一些朋友。

⑵ web前端需要哪些技術

1. 所有知識框架，那肯定是一個結構型的展現，就是一棵樹。web前端的知識點非常多，也非常散，需要好幾層結構來組織這個體系，否則就會顯得很亂。那麼如何組織、把誰和誰放在一塊兒？這是真正值得我們去思考的，你也可以自己來思考一下這個問題。

2. 在我總結的這個知識框架中，首先第一層我劃分為：理論知識，類庫框架，編碼開發，運行環境。如下圖：

首先，你要知道web系統雖然大部分是在瀏覽器下運行，但是js可能會被運行在node環境。

在瀏覽器環境下，最重要的兩點是：web安全和性能優化。需要注意的綱要我都列出來了，如果想了解推薦兩本書《白帽子將web安全》《高性能網站建設指南》

8. 其他

以上這些是全部的知識體系。如果你想成為一名合格的、讓leader喜歡的程序猿，你除了知道這些知識之外，我覺得還需要以下幾點：

⑶ Webpack，Browserify和Gulp三者之間到底是怎樣的關系

怎麼解釋呢？因為 Gulp 和 browserify / 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的插件。

不知道這樣夠清楚了么

⑷ 怎樣用yuicompressor壓縮使用了seajs架構的js代碼

點「輸入」，在彈出的窗口中，第一項「Local storage」是讀取你保存在手機中的文件js，第二個「Treebl's official repo」是輸入代碼js的，第三個是輸入網址遠程載入js，第四個是根據名稱讀取js，其中第三種和第四種方法使用得相當少，可以忽略。

⑸ 網站優化:所有的js代碼放到同一個js文件中好，還是不同的頁面根據需要創建不同的js文件好

網站優化：一個是壓縮合並css，js，一個是合並圖片和小圖標來達到減少請求量的目的；所以當然是所有的js代碼放到同一個js文件中好；需要注意的是：
1、只要命名不沖突放一個文件裡面完全沒問題,初始化代碼用一個$(function(){...})包裹著就可以了；
2、不同的頁面執行不同的邏輯代碼塊完全不沖突,關鍵是知道自己在做什麼；
具體做法：
1）比如a.css,b.css,c.css,把裡面的內容都復制到一個css中，main.css這樣手動就可以合並
壓縮的話，網上都有工具來壓縮，直接網路 css壓縮 就可以了;
2）js大部分是可以直接和css一樣手動合並，然後壓縮的（壓縮方法，和壓縮css一樣，網路去），不過要注意復制到文件時的順序，和代碼裡面的一些規范，不要把依賴什麼的搞混了；如果js文件非常多手動處理很麻煩的時候，可能需要藉助工具來實現，你可以試著用前端的一些載入器（require,seajs）來做一些優化，達到按需載入的目的，推薦用seajs試試；自動壓縮的話，可以用nodejs的grunt來壓縮，很好用。

⑹ 用了webpack還需要用seajs嗎

webpack是後台工具，是負責：開發過程中的代碼模塊化，代碼壓縮、檢查等的功能的插件。
而seajs是一個CMD的一個前端引js的東西，解決前端依賴的
可以在使用webpack就不用使用seajs了，使用了反而更多的載入seajs的文件了

⑺ npm安裝spm出錯，請問是什麼問題

SPM v.1.1.2 With SeaJS
SPM v1.1.2使用指南
1.SPM用途
SeaJS提供了模塊化開發的機制，在代碼開發完後，還需要做產品發布相關的一些操作。 這些可以通過SPM來完成，SPM提供了模塊安裝、壓縮、打包部署等功能。
2.SPM安裝
1.從nodejs官網下載最新版本的node。 這里以node-0.8.14為例，直接下載windows版本的安裝包即可，默認安裝到"C:\Program Files\nodejs", 會自動添加到path中，查看一下版本。
C:\Documents and Settings\Administratornode -v
v0.8.14
2.新版的node都帶了npm,這里通過npm來安裝spm。下面指定安裝1.1.2版本，在當前為最新版本。 如果不指定版本號，默認安裝最新版本。安裝包大小為11.8M，根據網速不同，請耐心等待。
C:\Documents and Settings\Administratornpm install [email protected] -g
npm http GET https://registry.npmjs.org/spm/1.1.2
npm http 200 https://registry.npmjs.org/spm/1.1.2
npm http GET https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http 200 https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http GET https://registry.npmjs.org/spm-env
npm http GET https://registry.npmjs.org/csslint
npm http GET https://registry.npmjs.org/async
...
下載完spm後，會根據壓縮包中的package.json自動安裝相關的依賴包,最後會顯示如下的界面。
C:\Documents and Settings\Administrator\Application Data\npm\spm - C:\Documents and Settings\Administrator\Application
Data\npm\node_moles\spm\bin\spm
[email protected] C:\Documents and Settings\Administrator\Application Data\npm\node_moles\spm
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected].
0, [email protected], [email protected], [email protected])
3.安裝後檢查一下版本
C:\Documents and Settings\Administratorspm -v
v1.1.2
如果這種方式安裝比較慢，可以git 源碼後安裝，詳見官方文檔。
本次測試使用的是Widnows XP操作系統
以下演示使用的是v1.1.2版本，不同的版本可能存在差異,請自行留意。
3.SPM查找和安裝模塊
我們先在C盤根目錄建立一個assets目錄，用於保存前端開發的所有文件。
先使用spm下載開發需要的模塊,spm默認的模塊伺服器為http://moles.spmjs.org/。 也可以自己在內網搭搭設一個模塊伺服器，這里不詳述。
我們可以先使用spm search命令在模塊伺服器查找可安裝的模塊的版本。
C:\assetsspm search seajs
C:\assetsspm search jquery
C:\assetsspm search mustache //以mustache為例子
...
versions: //這里列出可用的版本
0.4.0:
- mustache.js
0.5.0:
- mustache.js
root: gallery //顯示模塊的跟目錄
name: mustache
tag:
type:
C:\assetsspm install [email protected] //指定安裝seajs版本
C:\assetsspm install gallery.jquery //不指定版本號，默認安裝伺服器上jquery最新版本
C:\assetsspm install gallery.mustache //不指定版本號，默認安裝伺服器上mustache最新版

⑻ 網頁頁面優化如何合並JS

網站優化，一個是壓縮合並css，js，一個是合並圖片和小圖標來達到減少請求量的目的
合並css和js這個很簡單
比如a.css,b.css,c.css
把裡面的內容都復制到一個css中，main.css這樣手動就可以合並
壓縮的話，網上都有工具來壓縮，直接網路 css壓縮 就可以了

js的話，大部分是可以直接和css一樣，手動合並，然後壓縮的（壓縮方法，和壓縮css一樣，網路去），不過要注意復制到文件時的順序，和代碼裡面的一些規范，不要把依賴什麼的搞混了

如果js文件非常多手動處理很麻煩的時候，可能需要藉助工具來實現，這個，你可以試著用前端的一些載入器（require,seajs）來做一些優化，達到按需載入的目的，推薦用seajs試試

自動壓縮的話，可以用nodejs的grunt來壓縮，很好用

⑼ seajs怎樣調用壓縮後的文件

PrintPreviewDialog pPDlg;
exec_prefix='NONE'PACKAGE='libevent'
PACKAGE_BUGREPORT=''
PACKAGE_NAME=''
PACKAGE_STRING=''
PACKAGE_TARNAME=''
PACKAGE_URL=''
PACKAGE_VERSION=''
PATH_SEPARATOR=':'

⑽ 如何將模塊化js組件可以在seajs或者requirejs中使用

首先，下載到源碼之後，在頁面引入lib/echarts-plain-map.js，plain-map是未壓縮的版本
<script type="text/javascript" src="lib/echarts-plain-map.js"></script>
然後引入主文件之後，就可以直接使用init()實例化了
<script type="text/javascript">var myChart = echarts.init({ // ...});</script>