每个前端开发人员都有自己喜欢的开发工具，用这些工具能让编码更容易并且“令人愉快”。分享一些我认为真的很棒的很棒的Web开发工具！

1.Glitch

https://glitch.com

好的，这不仅仅是一个工具，还是一个非常棒的编码平台以及一个很棒的技术社区。我可以在内置代码编辑器的帮助下托管我的项目。支持多种语言，但最适合NodeJS。

2.Shadows

https://brumm.af/shadows

这个网站提供生成平滑阴影的CSS代码，可以创建平滑的边框阴影。它看起来真的很流畅，令人满意。

3.Coolors

https://coolors.co

这是一款非常好的在线工具，可以为项目生成匹配的颜色方案。如果不喜欢当前的方案，按下空格键，它会重新生成一个配色方案，直到你满意~

4. Blobmaker

https://blobmaker.app

Blobmaker可帮助你随机生成各种尺寸，不同颜色和形状的SVG Blob。你可以用作背景或创建看起来很酷的动画。

5.Getwavs

https://getwaves.io

与Blobmaker相似，Get Waves能够随机生成不同颜色和不同数量的波浪。用作网页的页脚或页眉看起来不错。

6. Undraw.co

https://undraw.co

开放源代码项目的SVG插图集，可用来做登录页面，404页面等，当然普通页面也能用!上面的插图可以不带归属地版权的使用，无需支付任何费用。

7. Marcdown

https://liyasthomas.github.io/marcdown

由Liyas Thomas提供的在线实时的Markdown网页编辑器，它可预览Markdown代码，将其发布到GitHub上。它提供一个非常漂亮的暗黑模式。还可脱机工作，这使得它显得更出色。

8.postwoman

https://postwoman.io

这是Liyas Thomas构建的另一个工具。Postwoman是一个API请求构建工作。开发者可以不使用代理来测试 API。这是一个渐进式Web应用程序，可以保存到桌面来用。它是轻量级的产品，基本上可以是Postman的在线替代品。

9. Screely.com

https://screely.com

它可以帮助你创建超级漂亮的网站截图模型。如果你不是MacBook用户，但需要更好的网站图片作为自述文件，它非常适合我们。

10. CSS网格生成器

https://cssgrid-generator.netlify.com/

这是Sarah Drasner的创建的优秀网站，它使用CSS创建动态网格布局。

以上是10款web前端开发工具分享，希望对你有帮助。

@ TOC

阅读本文章之前，相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了，那么他们之间究竟有什么区别呢？

gulp文档上面有这么一句话 ，也就是说 gulp是一个自动化构建工具；

gulp的一些功能如下(包括但不限于):

其实Webpack和另外两个并没有太多的可比性

傻瓜式起步照搬官网文档

1.安装

2.在项目根目录下创建一个名为 gulpfile.js 的文件：

3.运行 gulp：

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

具体详情可以查看 gulpjs.com文档

新建一个项目gulp-test

环境:

1.新建文件以下文件如下

其中 gulpfile.js 是我们gulp的配置文件，启动gulp默认会找个这个文件并执行；

2.接下来安装依赖

一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)

此时我们的目录结构是这样了

安装依赖

这里页面实时刷新只讲这个 gulp-connect ，其他详情可以参照 Browsersync 和文章 gulp-livereload

安装完依赖后配置gulpfile.js如下:

大概讲解一下gulpfile.js:

gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务（task）

如上我们定义了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任务，其中:

my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下；

my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下；

html 是将 符合所提供的匹配模式的html进行监听，如果有变化则connect.reload()

clean 是如果任务重新启动时 删除旧文件；

default gulp默认启动的任务

watch gulp的api 监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

server 依赖gulp-connect启动一个服务器

配置完gulpfile.js之后，我们给js和css及html加点东西:

首先js/helloworld.js

css/index.scss

index.html

运行gulp

浏览器效果:

接下来我们修改helloworld.js来看看是否能实时刷新

修改如下:

按保存之后，终端给我们报了一个错:

查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法，有问题解决问题，es6=>es5

解决方案:

安装gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

运行

依然报上面的错；找了一些原因发现，虽然安装了相关依赖，却没有配置.babelrc文件，即babel还没转化es6

根目录添加.babelrc文件

重新运行:

查看dist下的js文件

改变helloworld.js检查页面是否刷新

保存，页面的天空蓝换成你们喜欢的yellow颜色

修改index.scss 查看是否会刷新页面

最后修改index.html 查看是否会刷新页面

今天主要学习了gulp的简单项目搭建及实时更新配置；其实gulp类似于grunt的弱化版，但更简单好用，只是插件会少一些，目前主流的项目搭建工具主要是webpack，但依然有不少项目还用着gulp或者grunt

扩展:

下面还有一些楼主的学习笔记:

有兴趣的可以多多交流@ 楼主博客

前端开发工具是开发必不可少的，现在的开发工具功能很强大，但是还是有一些不同，下面详细介绍一下，看看哪款适合你

HBuilder

HBuilder工具是支持一些html和js等开发，主要编写一些c和web等语言，最大的优势就是速度比较快，强大的代码提示和代码输入，大大增加了开发者的开发效率。

Sublime Text

编辑器里边支持emmet比较好的的唯一一款。多功能插件，还可以自定义键绑定，功能有很多，包括多选择和多窗口和python api等功能，为开发者提供了开发方便。

webstorm

js开发工具，web前端开发神器，功能十分强大，界面清晰，人性化设计，使用方便。

所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。

phpstorm

测试后端 API 接口时非常好用。GET、POST、DELETE、OPTIONS、PUT 这些方法都支持。

idea

phpstorm、idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。

Prettier Playground

代码格式化工具，支持格式化 JavaScript 代码，包括 [ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript] 等。

IDE 大多支持 Prettier 工具， 也有在线版本，可以在浏览器里格式化代码。

Dreamweaver

Dreamweaver是一款网页代码编辑器，利用一些前端代码对网页进行快速的开发，可以通过智能搜索引擎对网页进行访问，开发者可以直观的开发减少出现的错误。

---