2015年转眼就要过去了，这一年出现了很多新的网页设计和开发的工具，所以我想是时候来一发2015年我最喜欢的前端工具的总结了。

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

  • 我不能保证这些工具的质量和安全性；

  • 这里只是我在2015年发现的工具，并不表示它们是在2015年开发出来了；

  • 没有按任何特定顺序排列；

  • 有些可能并不属于“前端工具”，但我们只讨论它们属于前端的这部分；

下面，让我们开始吧。

1. ai2html

它是有纽约时报编辑部的开发者开发出来的，它的描述如下：

把你的Illustrator文档转换为HTML和CSS的开源Adobe Illustrator脚本。

frontend-tools-2015-1-ai2html

2. sloc

这个非常的整洁。这是一个命令行工具，可以帮你为源码生成统计信息。默认情况下，输出信息只是一个简单的列表，但你也可以将它转换为CSV、JSON、CLI表格格式。通过 npm 安装后，你可以执行这样的命令：

sloc index.html

我对一个比较大的HTML文档执行上面的命令，生成了下面的信息：

 

  1. ---------- Result ------------ 
  2.  
  3.             Physical :  9788 
  4.               Source :  6340 
  5.              Comment :  645 
  6. Single-line comment :  0 
  7.        Block comment :  645 
  8.                Mixed :  642 
  9.                Empty :  3445 
  10.  
  11. Number of files read :  1 
  12.  
  13. ------------------------------ 

下面的命令可以生成JSON格式的数据：

 

  1. // 命令 
  2. sloc --format json index.html 
  3.  
  4. // 结果 
  5. { 
  6.   "files": [ 
  7.     { 
  8.       "path": "index.html", 
  9.       "stats": { 
  10.         "total": 9788, 
  11.         "source": 6340, 
  12.         "comment": 645, 
  13.         "single": 0, 
  14.         "block": 645, 
  15.         "mixed": 642, 
  16.         "empty": 3445 
  17.       }, 
  18.       "badFile": false 
  19.     } 
  20.   ], 
  21.   "summary": { 
  22.     "total": 9788, 
  23.     "source": 6340, 
  24.     "comment": 645, 
  25.     "single": 0, 
  26.     "block": 645, 
  27.     "mixed": 642, 
  28.     "empty": 3445 
  29.   } 
  30. } 

3. Walkway

这是一个制作SVG元素动画效果非常简单的方法，我可以确保它的易用性。

frontend-tools-2015-2-walkway

4. VisSense.js

这个库可能有很多不同的用例。它被描述为：

一个可以观测DOM元素可见性变化的实用工具库。可以立即知道一个元素被隐藏、部分可见、全部可见。

frontend-tools-2015-3-vissense

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

5. is.js

这被描述为“微型检查库”，它提供了一个很好的API，允许你做各种数据进行检测。

frontend-tools-2015-4-isjs

  1. is.decimal(41.5); // true 
  2. is.number('hello'); // false 
  3. is.regexp(/test/); // true 
  4. is.usZipCode('90201'); // true 
  5. is.socialSecurityNumber('017-90-7890'); // true 
  6. is.hexColor('#333'); // true 
  7. is.odd(42); // false 
  8. is.domNode(el); // depends on the value of el 
  9. is.iphone(); // depends on device 
  10. is.ipad(); // depends on device 
  11. is.inNextWeek(myDate); // depends on date value 

6. Grunt SassyClean

Grunt SassyClean 是一个 Grunt 任务，允许你删除任何无用的部分。也就是说，它们可能在你的文件结构中的，但不管什么原因，你并没有在项目中真正使用它们。

frontend-tools-2015-5-grant-sassyclean

你需要在你的Grunt文件中包含 grunt.initConfig() 像下面这样：

  1. sassyclean: { 
  2.   options: { 
  3.     modules: ['sass/modules/**/*.scss', 
  4.               'sass/themes/**/*.scss', 
  5.               'sass/layout/**/*.scss', 
  6.               'sass/base/**/*.scss'], 
  7.     buildfiles: ['sass/**/*.scss'], 
  8.     remove: false, 
  9.     days: null 
  10.   }, 
  11. } 

7. Sass Director

这是另一个非常整洁但体积很小的Sass工具。Sass Director会生成一个终端命令，执行后会自动生成文件结构和文件。

frontend-tools-2015-6-sassdirector

8. Awesomplete

这是一个非常易用，无任何依赖的JavaScript自动补全脚本，它提供了所有自动补全脚本需要做的，还可以进行自定制。例如，引入CSS和JS文件后，可以这样编写HTML结构：

  1. <input class="awesomplete" 
  2.        data-list="Cobol, Java, JavaScript, PHP, Python, Ruby" /> 

frontend-tools-2015-7-awesomplete

9. What Does My Site Cost?

由Tim Kadlec维护的该项目为解决性能问题提供了可行之路。性能上最重要的是移动网络，使用这个工具，它将告诉你：

找出世界各地使用移动网络访问你网站需要消耗的成本。

frontend-tools-2015-8

10. JSCS

它是为了格式化“JavaScript代码样式”，并不是一个新的项目，但是我是在今年发现的它，我想每一个JS开发者都需要知道它的存在。

frontend-tools-2015-9-jscs

一些其他工具

这里是一些“荣誉奖”得主，也许值得你一试：

  • csswizardry-grids：响应式、移动优先、***嵌套、简单易用的栅格系统；

  • xr：我喜欢简单却能把事情做好的东西，这个就是把XMLHttpRequest包装起来的超级简单的方法；

  • Bootply：Bootstrap是一个非常流行的框架，所以这个BootStrap编辑器值得一试；

  • You Might Not Need jQuery Plugins：简单的jQuery插件和脚本；

  • tota11y：使用辅助技术帮助可视化你的网站是如何执行的；

希望我发现的这些工具你也会喜欢，如果你尝试过其中任何一个，请让我知道。

那么，2015年你最喜欢的工具是什么呢？欢迎分享你的观点。