2015年轉(zhuǎn)眼就要過去了，這一年出現(xiàn)了很多新的網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)的工具，所以我想是時(shí)候來(lái)一發(fā)2015年我最喜歡的前端工具的總結(jié)了。
在開始之前，我有必要提一下：
-
我不能保證這些工具的質(zhì)量和安全性；
-
這里只是我在2015年發(fā)現(xiàn)的工具，并不表示它們是在2015年開發(fā)出來(lái)了；
-
沒有按任何特定順序排列；
-
有些可能并不屬于“前端工具”，但我們只討論它們屬于前端的這部分；
下面，讓我們開始吧。
1. ai2html
它是有紐約時(shí)報(bào)編輯部的開發(fā)者開發(fā)出來(lái)的，它的描述如下：
把你的Illustrator文檔轉(zhuǎn)換為HTML和CSS的開源Adobe Illustrator腳本。
2. sloc
這個(gè)非常的整潔。這是一個(gè)命令行工具，可以幫你為源碼生成統(tǒng)計(jì)信息。默認(rèn)情況下，輸出信息只是一個(gè)簡(jiǎn)單的列表，但你也可以將它轉(zhuǎn)換為CSV、JSON、CLI表格格式。通過 npm 安裝后，你可以執(zhí)行這樣的命令：
sloc index.html
我對(duì)一個(gè)比較大的HTML文檔執(zhí)行上面的命令，生成了下面的信息：
- ---------- Result ------------
- Physical : 9788
- Source : 6340
- Comment : 645
- Single-line comment : 0
- Block comment : 645
- Mixed : 642
- Empty : 3445
- Number of files read : 1
- ------------------------------
下面的命令可以生成JSON格式的數(shù)據(jù)：
- // 命令
- sloc --format json index.html
- // 結(jié)果
- {
- "files": [
- {
- "path": "index.html",
- "stats": {
- "total": 9788,
- "source": 6340,
- "comment": 645,
- "single": 0,
- "block": 645,
- "mixed": 642,
- "empty": 3445
- },
- "badFile": false
- }
- ],
- "summary": {
- "total": 9788,
- "source": 6340,
- "comment": 645,
- "single": 0,
- "block": 645,
- "mixed": 642,
- "empty": 3445
- }
- }
3. Walkway
這是一個(gè)制作SVG元素動(dòng)畫效果非常簡(jiǎn)單的方法，我可以確保它的易用性。
4. VisSense.js
這個(gè)庫(kù)可能有很多不同的用例。它被描述為：
一個(gè)可以觀測(cè)DOM元素可見性變化的實(shí)用工具庫(kù)?？梢粤⒓粗酪粋€(gè)元素被隱藏、部分可見、全部可見。
可以在次 演示 頁(yè)查看效果。
5. is.js
這被描述為“微型檢查庫(kù)”，它提供了一個(gè)很好的API，允許你做各種數(shù)據(jù)進(jìn)行檢測(cè)。
- is.decimal(41.5); // true
- is.number('hello'); // false
- is.regexp(/test/); // true
- is.usZipCode('90201'); // true
- is.socialSecurityNumber('017-90-7890'); // true
- is.hexColor('#333'); // true
- is.odd(42); // false
- is.domNode(el); // depends on the value of el
- is.iphone(); // depends on device
- is.ipad(); // depends on device
- is.inNextWeek(myDate); // depends on date value
Grunt SassyClean 是一個(gè) Grunt 任務(wù)，允許你刪除任何無(wú)用的部分。也就是說(shuō)，它們可能在你的文件結(jié)構(gòu)中的，但不管什么原因，你并沒有在項(xiàng)目中真正使用它們。
你需要在你的Grunt文件中包含 grunt.initConfig() 像下面這樣：
- sassyclean: {
- options: {
- modules: ['sass/modules/**/*.scss',
- 'sass/themes/**/*.scss',
- 'sass/layout/**/*.scss',
- 'sass/base/**/*.scss'],
- buildfiles: ['sass/**/*.scss'],
- remove: false,
- days: null
- },
- }
這是另一個(gè)非常整潔但體積很小的Sass工具。Sass Director會(huì)生成一個(gè)終端命令，執(zhí)行后會(huì)自動(dòng)生成文件結(jié)構(gòu)和文件。
8. Awesomplete
這是一個(gè)非常易用，無(wú)任何依賴的JavaScript自動(dòng)補(bǔ)全腳本，它提供了所有自動(dòng)補(bǔ)全腳本需要做的，還可以進(jìn)行自定制。例如，引入CSS和JS文件后，可以這樣編寫HTML結(jié)構(gòu)：
- <input class="awesomplete"
- data-list="Cobol, Java, JavaScript, PHP, Python, Ruby" />
由Tim Kadlec維護(hù)的該項(xiàng)目為解決性能問題提供了可行之路。性能上最重要的是移動(dòng)網(wǎng)絡(luò)，使用這個(gè)工具，它將告訴你：
找出世界各地使用移動(dòng)網(wǎng)絡(luò)訪問你網(wǎng)站需要消耗的成本。
10. JSCS
它是為了格式化“JavaScript代碼樣式”，并不是一個(gè)新的項(xiàng)目，但是我是在今年發(fā)現(xiàn)的它，我想每一個(gè)JS開發(fā)者都需要知道它的存在。
一些其他工具
這里是一些“榮譽(yù)獎(jiǎng)”得主，也許值得你一試：
-
csswizardry-grids：響應(yīng)式、移動(dòng)優(yōu)先、***嵌套、簡(jiǎn)單易用的柵格系統(tǒng)；
-
xr：我喜歡簡(jiǎn)單卻能把事情做好的東西，這個(gè)就是把XMLHttpRequest包裝起來(lái)的超級(jí)簡(jiǎn)單的方法；
-
Bootply：Bootstrap是一個(gè)非常流行的框架，所以這個(gè)BootStrap編輯器值得一試；
-
You Might Not Need jQuery Plugins：簡(jiǎn)單的jQuery插件和腳本；
-
tota11y：使用輔助技術(shù)幫助可視化你的網(wǎng)站是如何執(zhí)行的；
希望我發(fā)現(xiàn)的這些工具你也會(huì)喜歡，如果你嘗試過其中任何一個(gè)，請(qǐng)讓我知道。
那么，2015年你最喜歡的工具是什么呢？歡迎分享你的觀點(diǎn)。
