2015年轉(zhuǎn)眼就要過去了，這一年出現(xiàn)了很多新的網(wǎng)頁設(shè)計(jì)和開發(fā)的工具，所以我想是時(shí)候來一發(fā)2015年我最喜歡的前端工具的總結(jié)了。

在開始之前，我有必要提一下：

• 我不能保證這些工具的質(zhì)量和安全性；
• 這里只是我在2015年發(fā)現(xiàn)的工具，并不表示它們是在2015年開發(fā)出來了；
• 沒有按任何特定順序排列；
• 有些可能并不屬于“前端工具”，但我們只討論它們屬于前端的這部分；

下面，讓我們開始吧。

推薦閱讀：

• 《2015年50+ JavaScript 工具、資源合集(第一部分)》
• 《2015年50+ JavaScript 工具、資源合集(第二部分)》
• 《2015年50+ CSS 工具、框架、庫合集(1-26)》
• 《2015年50+ CSS 工具、框架、庫合集(27-54)》

1. ai2html

它是有紐約時(shí)報(bào)編輯部的開發(fā)者開發(fā)出來的，它的描述如下：

把你的Illustrator文檔轉(zhuǎn)換為HTML和CSS的開源Adobe Illustrator腳本。

2. sloc

這個(gè)非常的整潔。這是一個(gè)命令行工具，可以幫你為源碼生成統(tǒng)計(jì)信息。默認(rèn)情況下，輸出信息只是一個(gè)簡單的列表，但你也可以將它轉(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)畫效果非常簡單的方法，我可以確保它的易用性。

4. VisSense.js

這個(gè)庫可能有很多不同的用例。它被描述為：

一個(gè)可以觀測DOM元素可見性變化的實(shí)用工具庫?？梢粤⒓粗酪粋€(gè)元素被隱藏、部分可見、全部可見。

可以在次 演示 頁查看效果。

5. is.js

這被描述為“微型檢查庫”，它提供了一個(gè)很好的API，允許你做各種數(shù)據(jù)進(jìn)行檢測。

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

6. Grunt SassyClean

Grunt SassyClean 是一個(gè) Grunt 任務(wù)，允許你刪除任何無用的部分。也就是說，它們可能在你的文件結(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
  },
}

7. Sass Director

這是另一個(gè)非常整潔但體積很小的Sass工具。Sass Director會(huì)生成一個(gè)終端命令，執(zhí)行后會(huì)自動(dòng)生成文件結(jié)構(gòu)和文件。

8. Awesomplete

這是一個(gè)非常易用，無任何依賴的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" />

9. What Does My Site Cost?

由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)先、無限嵌套、簡單易用的柵格系統(tǒng)；
• xr：我喜歡簡單卻能把事情做好的東西，這個(gè)就是把XMLHttpRequest包裝起來的超級(jí)簡單的方法；
• Bootply：Bootstrap是一個(gè)非常流行的框架，所以這個(gè)BootStrap編輯器值得一試；
• You Might Not Need jQuery Plugins：簡單的jQuery插件和腳本；
• tota11y：使用輔助技術(shù)幫助可視化你的網(wǎng)站是如何執(zhí)行的；

希望我發(fā)現(xiàn)的這些工具你也會(huì)喜歡，如果你嘗試過其中任何一個(gè)，請(qǐng)讓我知道。

那么，2015年你最喜歡的工具是什么呢？歡迎分享你的觀點(diǎn)。

via：sitepoint.com，由 Specs 翻譯整理，發(fā)布在 Coder資源網(wǎng)，轉(zhuǎn)載請(qǐng)注明來源。