標籤：image 靜態 height 簡化 寫法 doc pac 項目 任務
首先，不說廢話，它的介紹和作者就不在多說了，網上一百度一大堆；
我在這裡只是來寫寫我這2天抽空對seajs的瞭解並爬過的坑，和實現的一個小demo(純屬為了實現，高手請繞道);
一、環境工具及安裝
1、首先，務必先說明，本demo是基於nodeJs環境下開發的，因此要安裝nodeJs（地址：https://nodejs.org/en/）；
2、接下來安裝gulp： 在第一步成功的情況下，安裝gulp構建工具，並且將其依賴到項目進來；同時需要安裝browser-sync，gulp-seajs-combo ,run-sequence ,且也將它們依賴到項目進來；
成功後package.json有如下依賴：
...
"gulp": "^3.9.1",
"browser-sync": "^2.16.0",
"gulp-seajs-combo": "^1.2.3",
"run-sequence": "^1.2.2"
...
3、到seaJs 官網下載個seaJs（地址：http://seajs.org/docs/#downloads），版本在2.1以上的都可以；下載後解壓，將裡面的dist檔案拷貝到項目，並重新命名為seajs;
到這裡需要下載安裝的東西就差不多了，項目的目錄結構先貼出來給大家：
二、seajs的引入及配置說明；
1、html頁面
<!DOCTYPE html><html><head><meta charset="utf-8"><title>引用seajs</title><style type="text/css">html,body{position: relative;height: 100%;}#hello-seajs{position: absolute;width: 300px;height: 100px;left: 0;top: 0;bottom: 0;right: 0;margin: auto;font-size: 26px;line-height: 100px;text-align: center;}</style></head><body><div id="hello-seajs">Hello seaJs</div><input type="text" id="ipt"></body><script src="../sea-module/seajs/sea.js"></script><script src="../config.js"></script><script src="../static/js/main.js"></script></html>
首先，看到頁面底部的3個js檔案引入：
第一個，先引入sea.js這個沒有什麼好說的；
第二個，引入seajs的基礎設定檔config.js；這裡要說一下，我們在項目中經常會用到jquery庫，因此，我也順便引入了，當然，是因為這裡有個坑，要跟大家說一下。
因為seajs是玉伯大人基於CMD規範開發出來的，因為其js代碼則要遵循此規範；然而不幸的是網上下載的jquery並不支援CMD規範，（在後來1.7版本以後支援的是AMD規範），因此，網上各種大神也對jquery的引入也提供了好幾種方法，這裡，我是用的方法是，將jquery檔案修改一下：
即將&&define.amd刪除掉即可，然後後我還重新命名為jquery.sea.js,表示seaJs可以用的jquery版本；
至於設定檔，具體的配置項官網講的很詳細,這裡我只說下，我的demo裡面的配置
seajs.config({base: "./sea-module/",alias: {"jquery": "jquery/jquery.sea.js"}})
base，即為設定sea.js的基礎路徑;
alias,則是用來簡化模組的別名，如"jquery": "jquery/jquery.sea.js" , 在別的模組引入的時候就可以直接寫成require(‘jquery‘)了，當然這個過程seajs會去基礎目錄base下找；
第三個，引入入口檔案；
這裡也有一個坑，當時我一開始搜尋到一篇文章的時候，是用另一種方式引入的；是在引入sea.js的時候再標籤裡面寫了個data-main屬性，如下：
<script src="sea/sea.js" data-config="./js/config" data-main="./js/main"></script>
大家切記，這貨已經過時 ，seajs在2.1版本的更新: 去除對 data-config / data-main 的支援。 這兩個是錦上添花的功能。保留著，看似能帶來簡潔性，但一定程度上掩蓋了內部機制。不如讓使用者直接通過 seajs.use 去啟動載入的好。
因此，不要在用這樣的寫法了。
我們直接在入口檔案mian.js 裡面seajs.use（），然後在頁面引入即可，這裡通過 use()方法 ,來在頁面中載入模組，它會告訴頁面先載入哪一個模組；
第四個，模組間的引用；
這裡我寫了2個js模組： application.js , util.js , 前者引入後者
application.js
define(function(require,exports,module){ var util = require(‘./util‘);var $ = require(‘jquery‘);function changeBg(){$(‘#hello-seajs‘).css({‘backgroundColor‘ : util.randomColor()});}changeBg()window.setInterval(function(){changeBg();},1500);});
util.js
define(function(require,exports,module){ var util = {}; var colorRange = [‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘]; util.randomColor = function(){ return ‘#‘ + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)]; }; module.exports = util;});
這裡就不用多講了，代碼很清晰；
三、gulp的配置
gulpfile.js
//外掛程式引入
var gulp = require(‘gulp‘);var browserSync = require(‘browser-sync‘).create();var combo = require(‘gulp-seajs-combo‘);var runSequence = require(‘run-sequence‘); //定義檔案目錄路徑var appDir = ‘app‘;
var distDir = ‘dist‘;//js模組合并
gulp.task(‘js‘,function(){ gulp.src(‘app/static/js/main.js‘) .pipe(combo({ ignore: [‘jquery‘] })) .pipe(gulp.dest(‘./dist/static/js‘));})// 建立靜態伺服器gulp.task(‘server‘, function () { browserSync.init({ server: { baseDir: [distDir, appDir], index: ‘html/test.html‘ } });});// 監聽檔案改變gulp.task(‘watch‘ , function () { gulp.watch(‘app/static/js/application.js‘, [‘js‘]); });//任務的工作流程啟動//step1 --build 生產目錄 dist/gulp.task(‘build‘, function(cb){ runSequence(‘js‘ , cb);});//step2 --開啟伺服器，即時監聽
gulp.task(‘default‘, function(cb){ runSequence(‘server‘ , ‘watch‘ , cb); });
這裡需要說明一下：
1、Browsersync能讓瀏覽器即時、快速響應您的檔案更改（html、js、css、sass、less等）並自動重新整理頁面（所謂的釋放你的F5）,還能同時在PC、平板、手機等裝置下進項調試，強烈推薦各位前端er使用；在本demo中，使用它建立了個靜態伺服器，http://localhost:3000;並且，監聽appliction.js檔案的變化，當我們修改appliction.js並儲存的時候，就會被監聽到其變化，重新執行js任務產生新的mian.js到dist目錄下，最後瀏覽器自動重新整理；就是這麼爽！
2、gulp-seajs-combo，用來合并我們的js模組檔案。想想，當我們js模組多的時候，頁面請求的數量也就隨之大大增加，這個是我們前端的一個忌諱，最佳化頁面的時候，就要減少請求數；所以這裡，提供了個外掛程式，gulp-seajs-combo，他可以幫我們把所有模組合并到一個main.js模組上去；這樣，頁面最後只需要引入main.js檔案即可，完美的解決了這個問題；
3、最後進入項目根目錄，在命令列裡輸入‘"gulp build" (產生dist目錄)，就產生生產環境；然後輸入 "gulp" 開啟伺服器，自動開啟頁面test.html;
四、項目git地址
https://github.com/931863856/seajs
結束語：
本文是我這兩天興起，就抽空研究了下seaJs；雖然這隻是個小demo，但是也真的踩了不少坑；其實前端現在潮流就是，自動化構建，模組化開發，所有才下了決心寫個小demo，希望對大家有用；同時畢竟這是我的一個小小的研究，漏洞肯定是存在的，希望各位大神看到的時候，可以給小弟提醒或者指正下，感激不盡！謝謝大家~
新手 gulp+ seajs 小demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
