web前端工具有哪些

这篇文章主要介绍“web前端工具有哪些”，在日常操作中，相信很多人在web前端工具有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”web前端工具有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联公司专注于沁水企业网站建设,响应式网站开发,成都做商城网站。沁水网站建设公司,为沁水等地区提供建站服务。全流程按需设计网站，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

1. ai2html

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

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

web前端工具有哪些

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元素动画效果非常简单的方法，我可以确保它的易用性。

web前端工具有哪些

4. VisSense.js

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

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

web前端工具有哪些

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

5. is.js

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

web前端工具有哪些

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

web前端工具有哪些

你需要在你的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

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

web前端工具有哪些