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

93 条回复 • 2016-07-22 12:16:50 +08:00

1

kisshere

2014-12-29 20:05:56 +08:00

1

F5

2

pertersonvv

OP

2014-12-29 20:06:34 +08:00

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

3

vilic

2014-12-29 20:10:00 +08:00

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

4

FrankFang128

2014-12-29 20:10:35 +08:00

自动刷新老烦了。

5

varx

2014-12-29 20:11:06 +08:00

brackets 免配置

6

pertersonvv

OP

2014-12-29 20:11:39 +08:00

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

7

marcfizzy

2014-12-29 20:11:59 +08:00

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

8

wintersun

2014-12-29 20:14:46 +08:00

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

9

Xrong

2014-12-29 20:17:19 +08:00

brackets 真的很好

10

pertersonvv

OP

2014-12-29 20:18:28 +08:00

@wintersun Ionic不是编辑器啊,亲

11

otfos

2014-12-29 20:18:42 +08:00

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

12

pertersonvv

OP

2014-12-29 20:19:01 +08:00

@Xrong 你用过几种编辑器?

13

mittya

2014-12-29 20:21:06 +08:00

https://prepros.io

14

pertersonvv

OP

2014-12-29 20:21:07 +08:00

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

15

txlty

2014-12-29 20:21:55 +08:00

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

16

KiseXu

2014-12-29 20:29:20 +08:00

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

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

17

KiseXu

2014-12-29 20:29:54 +08:00

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

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

18

subpo

2014-12-29 20:30:00 +08:00

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

19

pertersonvv

OP

2014-12-29 20:31:24 +08:00

@subpo 求链接:)

20

vilic

2014-12-29 20:32:13 +08:00

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

21

lizheming

2014-12-29 20:33:53 +08:00

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

22

raychar

2014-12-29 20:34:49 +08:00

http://codepen.io/

23

nigelvon

2014-12-29 20:35:08 +08:00 via Android

livereload

24

jaywcjlove

2014-12-29 20:35:18 +08:00

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

25

pertersonvv

OP

2014-12-29 20:43:49 +08:00

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

26

MichaelShen7

2014-12-29 20:44:24 +08:00

1

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

27

pertersonvv

OP

2014-12-29 20:46:43 +08:00

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

28

pertersonvv

OP

2014-12-29 20:47:07 +08:00

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

29

MaiCong

2014-12-29 20:49:02 +08:00 via iPhone

1

f5啊 26楼已经说了

30

alansalexer

2014-12-29 20:51:19 +08:00

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

31

drackzy

2014-12-29 20:52:40 +08:00

Jetbrains 的 Webstorm 支持 Live Edit

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

32

djyde

2014-12-29 20:54:37 +08:00

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

33

pertersonvv

OP

2014-12-29 21:00:06 +08:00

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

34

pertersonvv

OP

2014-12-29 21:02:07 +08:00

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

35

pertersonvv

OP

2014-12-29 21:09:31 +08:00

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

36

Biwood

2014-12-29 21:47:43 +08:00

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

37

pertersonvv

OP

2014-12-29 21:55:37 +08:00

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

38

sm0king

2014-12-29 21:57:37 +08:00

Hbuilder ?

39

zkd8907

2014-12-29 22:00:10 +08:00

visual studio

40

lerry

2014-12-29 22:06:11 +08:00

为啥不用 grunt

41

Jaylee

2014-12-29 22:11:27 +08:00

强烈推荐brackets，炒鸡好用

42

derek80

2014-12-29 22:16:35 +08:00

grunt or gulp

43

Jaylee

2014-12-29 22:16:44 +08:00

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

44

muzuiget

2014-12-29 22:33:40 +08:00

livereload 不二选择。

45

iamocean

2014-12-29 22:36:34 +08:00

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

46

scarlex

2014-12-29 23:01:40 +08:00

livereload +1，grunt 和 gulp 都有插件

47

wolfan

2014-12-29 23:03:08 +08:00

node.js+fis可以么？

48

fengchang

2014-12-29 23:06:29 +08:00

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

49

reeco

2014-12-29 23:11:01 +08:00 via iPhone

webstorm的live edit

50

Kilerd

2014-12-29 23:12:46 +08:00

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

51

riophae

2014-12-29 23:16:49 +08:00

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

52

riophae

2014-12-29 23:17:39 +08:00

2

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

53

FSFA

2014-12-29 23:43:50 +08:00

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

54

zikkeung

2014-12-29 23:44:51 +08:00

@pertersonvv 这是个软件

55

puras

2014-12-29 23:56:13 +08:00

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

56

fullstack0xyz

2014-12-30 00:11:04 +08:00

1

你需要个自动化构建的工具，当你会用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

57

fullstack0xyz

2014-12-30 00:12:18 +08:00

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

58

lch21

2014-12-30 00:24:13 +08:00

Emacs + grunt

59

pertersonvv

OP

2014-12-30 06:16:17 +08:00

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

60

pertersonvv

OP

2014-12-30 06:17:16 +08:00

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

61

jun4rui

2014-12-30 06:55:59 +08:00

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

62

ryanyu104

2014-12-30 08:52:46 +08:00

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

63

pertersonvv

OP

2014-12-30 08:54:18 +08:00

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

64

wwek

2014-12-30 08:56:46 +08:00

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

65

isKira

2014-12-30 09:20:49 +08:00

fis release -L

66

66beta

2014-12-30 09:23:36 +08:00

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

67

kokdemo

2014-12-30 09:24:59 +08:00

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

笑死了……

68

alanerzhao

2014-12-30 09:25:44 +08:00

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

69

kmokidd

2014-12-30 09:26:50 +08:00

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

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

70

88250

2014-12-30 09:28:13 +08:00

NetBeans

71

msg7086

2014-12-30 09:29:21 +08:00

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

72

pertersonvv

OP

2014-12-30 09:32:37 +08:00

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

73

wintersun

2014-12-30 09:34:13 +08:00

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

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

74

pertersonvv

OP

2014-12-30 09:36:14 +08:00

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

75

hussion

2014-12-30 09:49:15 +08:00

1

1. livereload
2. gulp + browserSync
3. liveStyle

76

wintersun

2014-12-30 09:54:17 +08:00

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

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

77

lizheming

2014-12-30 09:55:25 +08:00

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

78

rekey

2014-12-30 10:05:28 +08:00 via iPhone

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

79

LucasW

2014-12-30 10:12:51 +08:00

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

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

80

wikimo

2014-12-30 11:09:51 +08:00

http://getf5.com/

82

ryanyu104

2014-12-30 13:27:00 +08:00

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

83

fullstack0xyz

2014-12-30 13:40:54 +08:00

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

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

84

sitin

2014-12-30 13:51:03 +08:00

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

85

pertersonvv

OP

2014-12-30 13:57:38 +08:00

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

86

edwinxe2v

2014-12-30 14:25:34 +08:00

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

87

sitin

2014-12-30 15:06:44 +08:00

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

88

imeoer

2014-12-30 16:59:15 +08:00

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

89

soulteary

2014-12-30 20:07:46 +08:00

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

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

90

soulteary

2014-12-30 20:13:41 +08:00

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

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

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

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

91

lizheming

2014-12-30 20:17:16 +08:00

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

92

CosWind

2014-12-31 08:56:58 +08:00

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

93

zxhycxq

2016-07-22 12:16:50 +08:00

@fullstack0xyz +1