Codekit - 为Web前端打造的全能型神器(附推荐各种工具)

Codekit - incident57又一华丽丽的工具,目前是beta,官网上介绍中罗列了这些功能特性:

自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件

致力于js文件合并和压缩,以及js语法错误检查

同时还支持Compass(Sass伴侣,官网地址:compass-style.org)

令人发指的是甚至还能对jpeg&png图片优化

自动刷新浏览器(之前推荐过同类的工具:前端开发利器-F5)

让你在不同的项目中仅维护同一套文档

然而这还仅仅是其中的一部分...

相信对于Web前端攻城师来说,这些功能都是非常受用的

但是....

> 该软件只能跟Mac合体(Mac OS 10.7+)

> 收费的...当然这么好的软件还是值得购买的

想了解更多请移步官方网站吧 : http://incident57.com/codekit/

既然提到了工具,就顺带再推荐一些相关的工具供大家使用吧,涵盖Mac,Linux,Windows平台 :

LESS.app (free,for mac)

同样出自incident57早期的一个 工具,Codekit是它的升级版

WinLess   (free,for win)

WinLess是Windows下LESS.js的GUI工具,对于Windows下的web developer来说是居家必备的神物...

SimpleLESS (free for mac, linux and pc)

同样是华丽得一塌糊涂,貌似跟mac搭上边的软件都有这么一个特性-, -

Crunch (基于air,所以跨平台)

特点:

Crunch不仅仅是一款LESS编译器,同时也是LESS编辑器.

如果你工作中跟大量的LESS文件打交道试下它准没错.

Crunch是基于Adobe AIR平台.

SASS相关的GUI推荐:

compass.app ($7  Windows/Linux/Mac)

支持Windows/Linux/Mac
支持LiveReload
内置Web server
支持Compass扩展

参考:

http://sass-lang.com/ (很久前打算翻译官方的文档,貌似在草稿箱存了挺长时间一直木有完成它,找时间整理一下)

http://www.lesscss.org (由于官网在墙外,taobao ued飞长童靴发起了LESS中文站以及LESS在线工具
以及各种工具汇集)

https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js (同时也推荐了几款命令行工具)

http://winless.org/

http://compass.handlino.com/

http://compass.handlino.com/

时间: 2024-10-30 18:16:46

Codekit - 为Web前端打造的全能型神器(附推荐各种工具)的相关文章

Web前端开发工程师必须知道的技术列表

想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫.对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的.我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下: 通过许多实际项目,个人认为一个完备的前端产品开发团队,必须拥有如下的人才配备,也希望大家补充: ◎ 团队全体成员达到所有技能中的a级标准 ◎ 团队全体成员必须掌握两项技能中的b级标准,并保证所有的b级标准在该团队中有50%以上成员能达到 ◎ 团队全体成员必

Web前端开发工程师必备技术列表

想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫.对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的.我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下: 通过许多实际项目,个人认为一个完备的前端产品开发团队,必须拥有如下的人才配备,也希望大家补充: ◎团队全体成员达到所有技能中的a级标准 ◎团队全体成员必须掌握两项技能中的b级标准,并保证所有的b级标准在该团队中有50%以上成员能达到 ◎团队全体成员必须掌握

web前端学习——零基础web前端学习路线

买了一些前端入门书籍,好像也看不太明白?看了好多视频教程似乎也是似懂非懂?如果你现在是初学前端,入门的话,可以看看下面内容--或者有一点帮助学习前端,前端就好比如盖房子~html就充当了房子结构这部分,也是房子的基础.css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板-这些给房子改变风格,样式的就是cssjavascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧.这些功能性的就相当于是javascript例子可能不是很恰当,只是帮助大家有个初步的认识~

web前端-一个div内含三个div,内部三个div向左浮动,最后一个自适应大小

问题描述 一个div内含三个div,内部三个div向左浮动,最后一个自适应大小 在页面body里有一main层div,里面有三块div:left,Middle,right;全部向左浮动,最左边两个left,Middle,固定宽度,让最后一个div自适应剩余的空间,理想图如图: 而我现实出现成这样,如图最右边的只有一小块,不知道怎么设置成充满,而且,由于屏幕的分辨率会变,最右边的还容易跑到最下边去,如图: 求各位大神指导.... 解决方案 最好写百分比......这样最起码不会出现小屏的时候,第三

web前端-WEB前端基础 下列代码中,错误的是()?

问题描述 WEB前端基础 下列代码中,错误的是()? A. 01发票信息 发票抬头: 发票内容: B.发票信息 发票抬头: 发票内容: C.% D. 搜索"恒高科技": 解决方案 web前端基础Web前端基础[WEB基础]⑤一些前端小东西 解决方案二: 你这个是不是有格式的啊? 解决方案三: 我表示看不懂,是不是内容不全啊 相关文章 代码-WEB前端基础 答案为什么是B html-如何才能系统的学习web前端呢 web前端-css遇到十分基础的问题,求解释 web前端框架挑选问题,踊跃

前端开发-Web前端 二级菜单移植

问题描述 Web前端 二级菜单移植 web前端新手,好多都还不懂,还请多多指教.需要的效果如图,在鼠标悬停在按钮位置,出现二级菜单开发-Web前端 二级菜单移植-移动web 二级菜单联动"> 以下是需要移植的代码 <ul class="verticals-nav red red"> <li><a href="#"><i class="icon-briefcase"></i>

web前端-前辈,请问下面的代码怎么解释?

问题描述 前辈,请问下面的代码怎么解释? 前辈 请问下面的代码怎么解释? 原地址http://www.w3school.com.cn/tiy/t.asp?f=jquery_parent <!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin:

Web前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

极客Web前端开发资源大荟萃

中介交易 SEO诊断淘宝客 站长团购 云主机 技术大厅 前端开发已经成为当前炙手可热的技术之一.此次我们总结的前端开发包含了相关技术和流行趋势,希望从中大家可以挖掘你们所需要的,并带给你们最有价值的帮助!原文来自:极客标签 良心ui - 基于bootstrap 全面兼容ie6+的前端框架 良心ui - 基于bootstrap 全面兼容ie6+的前端框架. 前端代码回放:CSS3中的box-shadow用法 关于box-shadow的用法,分享出来给有需要的人使用. 360周鸿祎:互联网成功十大案