前端开发,一边编辑,一边自动刷新,哪种工具比较好?

[pertersonvv]

刚才看到一个Sublime LiveStyle,貌似可以做到,但是配置起来好像很麻烦的样子

有好配置点的么?

可能没说清楚,要的是编辑器,不是网页编辑器

[kisshere]

F5

[pertersonvv]

@kisshere 自动刷新,是不用按F5的

[vilicvane]

貌似 brackets 主打功能之一就是这个.

[FrankFang128]

自动刷新老烦了。

[varx]

brackets 免配置

[pertersonvv]

@varx 用brackets的理由就是自动刷新?没别的了?

[marcfizzy]

http://incident57.com/codekit/
http://livereload.com

[wintersun]

今天玩Ionic，它拿NodeJs做底层，启动测试服务器Node.exe，保存html、js时Chrome会自刷新，好高级的样子！
关键字：Ionic，Node.exe！

[Xrong]

brackets 真的很好

[pertersonvv]

@wintersun Ionic不是编辑器啊,亲

[otfos]

有一个轻量级的。http://www.livejs.com/

[pertersonvv]

@Xrong 你用过几种编辑器?

[mittya]

https://prepros.io

[pertersonvv]

@otfos 在网页写,不靠谱,缩进,补全,啥的都没

[txlty]

chrome 控制台可以。但需要配置一下才能保存。

[KiseXu]

https://chrome.google.com/webstore/detail/live-reload/pccddenngcbofbojodpghgpbheckgddn

https://chrome.google.com/webstore/detail/live-reload/pccddenngcbofbojodpghgpbheckgddn

[KiseXu]

上面第二个链接发错了，应该是：

https://chrome.google.com/webstore/detail/smartf5/pgglpnfdiigfapjinhfgnbckibpdbbeo

[subpo]

@pertersonvv 真的有一个工具叫f5，可以实现自动刷新

[pertersonvv]

@subpo 求链接:)

[vilicvane]

@pertersonvv brackets 的 JS 智能提示跟 VS 有得一比, 还支持混合类型, 好顶赞~

[lizheming]

@pertersonvv 我也想说1楼说的是这个... http://getf5.com/

[raychar]

http://codepen.io/

[nigelvon]

livereload

[jaywcjlove]

我用的是sublime 插件儿超级多，写md、todo 文件 都有超级牛的插件。

[pertersonvv]

@jaywcjlove md, todo的插件都叫啥?

[MichaelShen7]

[F5] Web开发免刷新 http://getf5.com/

[pertersonvv]

@MichaelShen7 怎么发的都是网页编辑器,说过要桌面编辑器的啊

[pertersonvv]

@MichaelShen7 额,这个好像有桌面版:)

[MaiCong]

f5啊 26楼已经说了

[alansalexer]

livereload啊，编辑器你可以任意选择，然后用grunt-livereload，浏览器再装对应的extension。

[drackzy]

Jetbrains 的 Webstorm 支持 Live Edit

https://www.jetbrains.com/webstorm/help/live-edit.html

[djyde]

@MaiCong 打开官网视频 windows+editplus 瞬间就关掉了。。。

[pertersonvv]

@djyde 瞬间就关掉了,怎么了?

[pertersonvv]

@mittya 你用它么?好像收费挺贵的,呵呵

[pertersonvv]

@drackzy 回复中怎么加入视频的?

[Biwood]

F5 +1，自动刷新长期占用CPU，体验不太好

[pertersonvv]

@Biwood 你说的是用啥工具弄的刷新呢?

[sm0king]

Hbuilder ?

[zkd8907]

visual studio

[lerry]

为啥不用 grunt

[Jaylee]

强烈推荐brackets，炒鸡好用

[derek80]

grunt or gulp

[Jaylee]

brackets选择相应的元素页面还会有提示，炒鸡赞，试用一下就知道了

[muzuiget]

livereload 不二选择。

[iamocean]

gulp + browser-sync
最近发现这个组合不错。
楼主可以尝试看看...

[scarlex]

livereload +1，grunt 和 gulp 都有插件

[wolfan]

node.js+fis可以么？

[fengchang]

我一直以为这是Firefox自带的功能呢，你们都没有？
那可能是Tab Mix插件的功能吧

[reeco]

webstorm的live edit

[Kilerd]

在编辑的网页里面 加个JS 自动定时刷新就好了，我就是这么干的。

[riophae]

Gulp + BrowserSync
你值得拥有
一旦用过别无他求

[riophae]

顺便附个 Gulp 入门教程 稍微长了点 但只要有耐心 你会发现这些投入非常值得
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

[FSFA]

https://chrome.google.com/webstore/detail/super-auto-refresh/kkhjakkgopekjlempoplnjclgedabddk

[zikkeung]

@pertersonvv 这是个软件

[puras]

livereload不错，使用Grunt，文件变化自动刷新。。。在写EmberJS时一直用它。。。

[fullstack0xyz]

你需要个自动化构建的工具，当你会用livereload的时候，仅仅livereload已经不能满足你了，所以还是学着用下gulp or grunt这种东西，你会在github上看到很多项目目录下都有 .gulpfile.js or .gruntfile.js，推荐 http://gulpjs.com/
但这个livereload仅限于前端的静态文件自动刷新，如果你想在写php/python/ruby或者其他需要服务器的后台代码的时候也能用livereload的话，可以试试我写的一个小工具 https://github.com/keith3/livereload-for-all

[fullstack0xyz]

好吧，如果就只想要个编辑器，webstorm

[lch21]

Emacs + grunt

[pertersonvv]

@Kilerd 为何不是通过工具来做呢,呵呵

[pertersonvv]

@riophae 貌似很多老的经典项目,用的都是grunt,grunt还是要学的?
是否有从grunt迁移到gulp的好法子?

[jun4rui]

Webstorm的自动刷新其实略微繁琐了，要用debug模式才行，每次换个文件都要手动配置一下，其实不咋地

[ryanyu104]

brackets太慢了，不习惯。Sublime LiveStyle是只能css吧，F5总是卡掉，livereload应该不错。

[pertersonvv]

@ryanyu104 你用过这么多啊:) bracket为何不弄的快一些?

[wwek]

Sublime LiveStyle 配置不难.
非常爽.谁用谁知道`

[isKira]

fis release -L

[66beta]

gulp & browser-sync +1
https://developers.google.com/web/starter-kit/

[kokdemo]

@lizheming “尤其适合有2个显示器或以上的高富帅使用”

笑死了……

[alanerzhao]

我觉得边想边写最好，我不喜欢写两行就刷新不过脑子，有意思么？

[kmokidd]

在13年末使用了一段时间的brackets 也是看中了liveload的特色 但是后来发现如果页面比较复杂brackets刷新非常慢 还不如自己F5 去年grunt对windows不够友好 现在已经非常好配置了吧 其实完全可以用grunt或者gulp的插件来替代

说实话自动刷新之后还是会F5或者ctrl+F5 不然总觉得少了一步...

[88250]

NetBeans

[msg7086]

@fengchang Opera 表示内置自动刷新好多年了。

[pertersonvv]

@alanerzhao 调效果的时候,自动刷新还是很好的吧?

[wintersun]

@pertersonvv 任意编辑器都可以的，因为Node.exe作为本地Web Server，也是本地运行的程序，可以自动检测文件变化，然后向Chrome推送event（假设是使用了WebSocket），Chrome收到event后自动刷新（本质上应该是Chrome打开的那个你开发的页面包含有WebSocket客户端代码，那段代码收到event后执行浏览器刷新命令）！

但我不确定一定是否如此，只是粗浅而大胆的假设，因为观察到的结果就是Ionic（run serve，也即运行在Node.exe环境下）能自动刷新！

[pertersonvv]

@wintersun 我开发网页,用不上Ionic吧,亲:)

[hussion]

1. livereload
2. gulp + browserSync
3. liveStyle

[wintersun]

@pertersonvv 我只是提供这样一种思路——你的服务端带一个WebSocket功能，并监测WebRoot文件夹下的文件变化（因为服务端也运行在本地）；你写的网页客户端接收WebSocket推送，刷新浏览器！ 无论你是Java+JSP，还是PHP，还是RoR，这个原理应该都可以实现吧。 而且实现一次，多个项目开发环境可以复用——与业务无关！ Production时屏蔽该功能就好了！ Ionic只是启发我这样联想的案例！^_^。

@riophae推荐gulp，仔细看了下，Ionic也包含有gulp的配置，有空我再仔细研究下！

[lizheming]

@kokdemo 噗，真是深藏功与名...没想到下拉之后会出现这么喜感的东西=。=||

[rekey]

@pertersonvv 还好，200多还是300多就可以了。我现在续费一年也就100多。

[LucasW]

Brackets 不错哦，即时预览功能，开源

可惜最近好像被Adobe绑定了些东西

[wikimo]

http://getf5.com/

[ryanyu104]

brackets刷新没问题 挺好的 但是作为IDE本身速度就没st快啊 我反正是用不习惯 不是我用的多啦 也是被逼出来的

[fullstack0xyz]

@wintersun 几个月前玩过几天ionic，livereload跟ionic没啥关系吧，他只是预先配置了gulpjs，都是gulp做的

我做的那个小工具跟你说的思路差不多，但是需要用proxy server
http://webtest.qiniudn.com/reload-man.png

[sitin]

1. sublime+livereload
2.vim+autorelaod
3.brackets自身的主打功能。
4. 使用webstorm
5.使用grunt

[pertersonvv]

@sitin 你用这么多编辑器啊?一个vim就狗血好几年了吧?

[edwinxe2v]

弱弱的说，我做了个 LIVEditor (http://liveditor.com)，主要就是为了自动刷新和集成一个类Firebug的HTML Inspector，不过代码编辑功能可能有点粗糙。不知道大家有什么看法？

[sitin]

@pertersonvv 之前折腾了下，主要狗血vim中

[imeoer]

可以用gulp+connect:
gulp.watch(['*.js', '*.html', '*.css'], function(data) {
gulp.src(data.path).pipe(connect.reload());
})

[soulteary]

@lizheming 这个问题遇到富操作，交互层级比较深的时候就蛋疼了，插件liveload还是各种wactch刷新都不如[CTRL/CMD+R]一下好...(如果在调插件，有可能分分钟机器load就满了，kill -9都嗨的停不下来）

PS:桌子上3+2的屌丝觉得那个链接那个没啥诱惑力= =

[soulteary]

既然水了一贴，辣么正经回复一条好了。

说说不适合自动刷新的场景：

如果遇到交互层级比较深的，要么分开页面做，要么得有URL ROUTE来自动调用逻辑；
如果项目比较大，用watch的方法，file change那么延迟设置比较高会更好点；
如果是调试浏览器插件逻辑，不建议带着自动刷新，可能造成意想不到的情况...


个人多数情况下，会直接在编辑器里写好，（脑补一下），之后再F5一下，
个人个别情况，在调试器窗口直接在DOM上边写边预览就好。

[lizheming]

@soulteary 我只是想说一楼说的不是F5手动刷新而是说这个工具而已...以及我一直没觉得这些工具顺手所以都是手动Ctrl+R的...

[CosWind]

我觉得glup + livereload就很好，然后用glup还可以配合其他的，比如用jade替代html，也是实时刷新，写coffee，实时转换成js，当然也可以加上css的sass什么的 https://github.com/coswind/gulp-livereload-sample-project

[zxhycxq]

@fullstack0xyz +1