2015年轉眼就要過去了，這一年出現了很多新的網頁設計和開發的工具，所以我想是時候來一發2015年我最喜歡的前端工具的總結了。
在開始之前，我有必要提一下：
-
我不能保證這些工具的質量和安全性；
-
這里只是我在2015年發現的工具，并不表示它們是在2015年開發出來了；
-
沒有按任何特定順序排列；
-
有些可能并不屬于“前端工具”，但我們只討論它們屬于前端的這部分；
下面，讓我們開始吧。
1. ai2html
它是有紐約時報編輯部的開發者開發出來的，它的描述如下：
把你的Illustrator文檔轉換為HTML和CSS的開源Adobe Illustrator腳本。
2. sloc
這個非常的整潔。這是一個命令行工具，可以幫你為源碼生成統計信息。默認情況下，輸出信息只是一個簡單的列表，但你也可以將它轉換為CSV、JSON、CLI表格格式。通過 npm 安裝后，你可以執行這樣的命令：
sloc index.html
我對一個比較大的HTML文檔執行上面的命令，生成了下面的信息：
- ---------- Result ------------
- Physical : 9788
- Source : 6340
- Comment : 645
- Single-line comment : 0
- Block comment : 645
- Mixed : 642
- Empty : 3445
- Number of files read : 1
- ------------------------------
下面的命令可以生成JSON格式的數據：
- // 命令
- sloc --format json index.html
- // 結果
- {
- "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
這是一個制作SVG元素動畫效果非常簡單的方法，我可以確保它的易用性。
4. VisSense.js
這個庫可能有很多不同的用例。它被描述為：
一個可以觀測DOM元素可見性變化的實用工具庫。可以立即知道一個元素被隱藏、部分可見、全部可見。
可以在次 演示 頁查看效果。
5. is.js
這被描述為“微型檢查庫”，它提供了一個很好的API，允許你做各種數據進行檢測。
- 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 是一個 Grunt 任務，允許你刪除任何無用的部分。也就是說，它們可能在你的文件結構中的，但不管什么原因，你并沒有在項目中真正使用它們。
你需要在你的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
- },
- }
這是另一個非常整潔但體積很小的Sass工具。Sass Director會生成一個終端命令，執行后會自動生成文件結構和文件。
8. Awesomplete
這是一個非常易用，無任何依賴的JavaScript自動補全腳本，它提供了所有自動補全腳本需要做的，還可以進行自定制。例如，引入CSS和JS文件后，可以這樣編寫HTML結構：
- <input class="awesomplete"
- data-list="Cobol, Java, JavaScript, PHP, Python, Ruby" />
由Tim Kadlec維護的該項目為解決性能問題提供了可行之路。性能上最重要的是移動網絡，使用這個工具，它將告訴你：
找出世界各地使用移動網絡訪問你網站需要消耗的成本。
10. JSCS
它是為了格式化“JavaScript代碼樣式”，并不是一個新的項目，但是我是在今年發現的它，我想每一個JS開發者都需要知道它的存在。
一些其他工具
這里是一些“榮譽獎”得主，也許值得你一試：
-
csswizardry-grids：響應式、移動優先、***嵌套、簡單易用的柵格系統；
-
xr：我喜歡簡單卻能把事情做好的東西，這個就是把XMLHttpRequest包裝起來的超級簡單的方法；
-
Bootply：Bootstrap是一個非常流行的框架，所以這個BootStrap編輯器值得一試；
-
You Might Not Need jQuery Plugins：簡單的jQuery插件和腳本；
-
tota11y：使用輔助技術幫助可視化你的網站是如何執行的；
希望我發現的這些工具你也會喜歡，如果你嘗試過其中任何一個，請讓我知道。
那么，2015年你最喜歡的工具是什么呢？歡迎分享你的觀點。
