告別了jquery，現在想分享下我們專案構建所使用的技術。
1、es6
2、browserify
3、babelify
4、gulp
5、concat
6、browser-sync
1、使用es6的模組管理（同時可以使用es6的語法糖了！）
2、使用browserify進行模組打包
3、babelify結合browserify使用，會在browserify打包時，進行語法轉換，將es6的語法轉換為es5。（但不會提供es6的方法，所以不要用es6的方法）
4、gulp執行任務。
5、concat進行檔案合併。
6、browser-sync監聽檔案的編號
流程：1、開發階段
2、專案部署
在開發階段，我們配置了乙個watch任務，watch任務會將你的**進行編譯、打包，結合browser-sync一起用簡直太爽！filedevmanager
/*所有檔案的依賴管理器
* 1、在每次更新檔案時應該檢測依賴物件是否有變化
*/var filedevmanager = (function()
results.foreach(function(tmp));
function mapdev(tmp)
return (fs.readfilesync(prefix+tmp, "utf-8").match(rimports) || )
.map(function(i)
filedevmaps[module] = mapdev(module);
return module;
});}
} })(rootpath+browserifypath, /(?:import.*?\.+?\/)(.+?)(?:'|")/g, /(?:\.+?\/)(.+?)(?:'|")/, /.+\/|/),
getfiledevmaps = function(),
build = function(results),
updatedevsmap = function()
function mapby(key, map)else
for(var k in filedevmaps)else
tmparr.indexof(key)!=-1 && devby.push(k);
}var map = ;
return map;
}; }
return ;
})();
模組管理的思路很簡單：
因為用了es6，所以所有的模組都是import匯入和export匯出，所以用了正則去匹配import作為所依賴的模組。
另外提供了更新依賴關係的介面。在每次檔案被修改的時候都會重新讀取檔案內容獲取模組之間的依賴關係。
在啟動watch任務的時候會構建乙個所有檔案之間完整的依賴關係，為了降低檔案模組物件的關係複雜度，每個模組分別有乙個屬性devs代表有哪些依賴的模組和devby代表被哪些模組所依賴。
再看watch任務：
gulp.watch(rootpath+browserifypath+'**/*.js', function(modify)
var path = modify.path;
if(!fs.existssync(path))
if(fs.lstatsync(path).isdirectory())
path = path.replace(/\\/g, "/");
trycatch(e)
var folder = (tmp.match(/.+\//) || )[0];
var folderidx = (onlycopypath || ).indexof( folder );
if(folderidx != -1)
if(modify.type === 'added')
var maps = filedevmanager.get();
var devby = (maps[tmp] || ).devby || ;
//獲取編譯佇列
var queue = gettoes5queue(devby.concat(tmp), alltoes5queue);
queue.priority = queue.priority.filter(function(item, idx));
queue.normal = queue.normal.filter(function(item, idx));
function gettoes5queue(devby, queue)).devby || , queue);
return queue;
}, queue); }
aftertoes5(queue.priority,
});function aftertoes5(queue, promise) }
var updatelist = queue.priority.concat(queue.normal).concat(tmp);
updatelist.filter(function(a, b)).foreach(function(i));
filedevmanager.updatemap();
console.log(tmp, filedevmanager.get()[tmp]);
return false;
});
watch任務會在toes5任務之後，進行update依賴關係。
因為在後期開發的時候發現在當乙個檔案有太多的依賴（當時用的是react+redux架構）的時候，檔案編譯會很慢（2s以上）,所以我對編譯檔案的佇列做了處理，將主檔案——判斷是否是主檔案通過rmainfile這個方法/正則來進行判斷，主檔案會放在priority陣列中，會有限進行編譯，而且只會有這個乙個檔案再編譯，保證主檔案的最快編譯速度。
以上基本上是我們專案watch任務所做的所有操作。
2、專案build
專案build相對簡單，我們所做的思路很直接，將乙個資料夾作為乙個任務，build做的事情無法就是檔案壓縮、加md5戳。
um..大概就是這樣，暫時先說這麼多，下次待續~
gulp構建專案
1.建立project資料夾，手動初始化專案，使用npm管理工具 npm init yes2.根據package.json中的依賴包來進行專案的開發 cnpm install 此處使用的是 映象 安裝所有的依賴包3.首先確保你全域性安裝了gulp,當然專案中也安裝了gulp gulp init 此處...
使用gulp構建專案
專案目錄如下 test src lib jquery.min.js component button.js selector.js less button.less selector.less dist gulpfile.js package.json package lock.jsongulpfi...
Gulp 自動化構建
use gulp 官網 編譯 sass 合併優化壓縮 css 校驗壓縮 js 優化新增檔案指紋 md5 元件化頭部底部 include html 實時自動重新整理 gulp是前端開發過程中對 進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重複的任務，讓我們可以...