V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pertersonvv
V2EX  ›  程序员

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

  •  
  •   pertersonvv · 2014-12-29 20:03:47 +08:00 · 20485 次点击
    这是一个创建于 3601 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    有好配置点的么?

    第 1 条附言  ·  2014-12-29 20:43:11 +08:00
    可能没说清楚,要的是编辑器,不是网页编辑器
    93 条回复    2016-07-22 12:16:50 +08:00
    kisshere
        1
    kisshere  
       2014-12-29 20:05:56 +08:00   ❤️ 1
    F5
    pertersonvv
        2
    pertersonvv  
    OP
       2014-12-29 20:06:34 +08:00
    @kisshere 自动刷新,是不用按F5的
    vilic
        3
    vilic  
       2014-12-29 20:10:00 +08:00
    貌似 brackets 主打功能之一就是这个.
    FrankFang128
        4
    FrankFang128  
       2014-12-29 20:10:35 +08:00
    自动刷新老烦了。
    varx
        5
    varx  
       2014-12-29 20:11:06 +08:00
    brackets 免配置
    pertersonvv
        6
    pertersonvv  
    OP
       2014-12-29 20:11:39 +08:00
    @varx 用brackets的理由就是自动刷新?没别的了?
    marcfizzy
        7
    marcfizzy  
       2014-12-29 20:11:59 +08:00
    wintersun
        8
    wintersun  
       2014-12-29 20:14:46 +08:00
    今天玩Ionic,它拿NodeJs做底层,启动测试服务器Node.exe,保存html、js时Chrome会自刷新,好高级的样子!
    关键字:Ionic,Node.exe!
    Xrong
        9
    Xrong  
       2014-12-29 20:17:19 +08:00
    brackets 真的很好
    pertersonvv
        10
    pertersonvv  
    OP
       2014-12-29 20:18:28 +08:00
    @wintersun Ionic不是编辑器啊,亲
    otfos
        11
    otfos  
       2014-12-29 20:18:42 +08:00
    有一个轻量级的。http://www.livejs.com/
    pertersonvv
        12
    pertersonvv  
    OP
       2014-12-29 20:19:01 +08:00
    @Xrong 你用过几种编辑器?
    mittya
        13
    mittya  
       2014-12-29 20:21:06 +08:00
    pertersonvv
        14
    pertersonvv  
    OP
       2014-12-29 20:21:07 +08:00
    @otfos 在网页写,不靠谱,缩进,补全,啥的都没
    txlty
        15
    txlty  
       2014-12-29 20:21:55 +08:00
    chrome 控制台可以。但需要配置一下才能保存。
    KiseXu
        17
    KiseXu  
       2014-12-29 20:29:54 +08:00
    subpo
        18
    subpo  
       2014-12-29 20:30:00 +08:00
    @pertersonvv 真的有一个工具叫f5,可以实现自动刷新
    pertersonvv
        19
    pertersonvv  
    OP
       2014-12-29 20:31:24 +08:00
    @subpo 求链接:)
    vilic
        20
    vilic  
       2014-12-29 20:32:13 +08:00
    @pertersonvv brackets 的 JS 智能提示跟 VS 有得一比, 还支持混合类型, 好顶赞~
    lizheming
        21
    lizheming  
       2014-12-29 20:33:53 +08:00
    @pertersonvv 我也想说1楼说的是这个... http://getf5.com/
    raychar
        22
    raychar  
       2014-12-29 20:34:49 +08:00
    nigelvon
        23
    nigelvon  
       2014-12-29 20:35:08 +08:00 via Android
    livereload
    jaywcjlove
        24
    jaywcjlove  
       2014-12-29 20:35:18 +08:00
    我用的是sublime 插件儿超级多,写md、todo 文件 都有超级牛的插件。
    pertersonvv
        25
    pertersonvv  
    OP
       2014-12-29 20:43:49 +08:00
    @jaywcjlove md, todo的插件都叫啥?
    MichaelShen7
        26
    MichaelShen7  
       2014-12-29 20:44:24 +08:00   ❤️ 1
    [F5] Web开发免刷新 http://getf5.com/
    pertersonvv
        27
    pertersonvv  
    OP
       2014-12-29 20:46:43 +08:00
    @MichaelShen7 怎么发的都是网页编辑器,说过要桌面编辑器的啊
    pertersonvv
        28
    pertersonvv  
    OP
       2014-12-29 20:47:07 +08:00
    @MichaelShen7 额,这个好像有桌面版:)
    MaiCong
        29
    MaiCong  
       2014-12-29 20:49:02 +08:00 via iPhone   ❤️ 1
    f5啊 26楼已经说了
    alansalexer
        30
    alansalexer  
       2014-12-29 20:51:19 +08:00
    livereload啊,编辑器你可以任意选择,然后用grunt-livereload,浏览器再装对应的extension。
    drackzy
        31
    drackzy  
       2014-12-29 20:52:40 +08:00
    Jetbrains 的 Webstorm 支持 Live Edit
    https://www.jetbrains.com/webstorm/help/live-edit.html
    djyde
        32
    djyde  
       2014-12-29 20:54:37 +08:00
    @MaiCong 打开官网视频 windows+editplus 瞬间就关掉了。。。
    pertersonvv
        33
    pertersonvv  
    OP
       2014-12-29 21:00:06 +08:00
    @djyde 瞬间就关掉了,怎么了?
    pertersonvv
        34
    pertersonvv  
    OP
       2014-12-29 21:02:07 +08:00
    @mittya 你用它么?好像收费挺贵的,呵呵
    pertersonvv
        35
    pertersonvv  
    OP
       2014-12-29 21:09:31 +08:00
    @drackzy 回复中怎么加入视频的?
    Biwood
        36
    Biwood  
       2014-12-29 21:47:43 +08:00
    F5 +1,自动刷新长期占用CPU,体验不太好
    pertersonvv
        37
    pertersonvv  
    OP
       2014-12-29 21:55:37 +08:00
    @Biwood 你说的是用啥工具弄的刷新呢?
    sm0king
        38
    sm0king  
       2014-12-29 21:57:37 +08:00
    Hbuilder ?
    zkd8907
        39
    zkd8907  
       2014-12-29 22:00:10 +08:00
    visual studio
    lerry
        40
    lerry  
       2014-12-29 22:06:11 +08:00
    为啥不用 grunt
    Jaylee
        41
    Jaylee  
       2014-12-29 22:11:27 +08:00
    强烈推荐brackets,炒鸡好用
    derek80
        42
    derek80  
       2014-12-29 22:16:35 +08:00
    grunt or gulp
    Jaylee
        43
    Jaylee  
       2014-12-29 22:16:44 +08:00
    brackets选择相应的元素页面还会有提示,炒鸡赞,试用一下就知道了
    muzuiget
        44
    muzuiget  
       2014-12-29 22:33:40 +08:00
    livereload 不二选择。
    iamocean
        45
    iamocean  
       2014-12-29 22:36:34 +08:00
    gulp + browser-sync
    最近发现这个组合不错。
    楼主可以尝试看看...
    scarlex
        46
    scarlex  
       2014-12-29 23:01:40 +08:00
    livereload +1,grunt 和 gulp 都有插件
    wolfan
        47
    wolfan  
       2014-12-29 23:03:08 +08:00
    node.js+fis可以么?
    fengchang
        48
    fengchang  
       2014-12-29 23:06:29 +08:00

    我一直以为这是Firefox自带的功能呢,你们都没有?
    那可能是Tab Mix插件的功能吧
    reeco
        49
    reeco  
       2014-12-29 23:11:01 +08:00 via iPhone
    webstorm的live edit
    Kilerd
        50
    Kilerd  
       2014-12-29 23:12:46 +08:00
    在编辑的网页里面 加个JS 自动定时刷新就好了,我就是这么干的。
    riophae
        51
    riophae  
       2014-12-29 23:16:49 +08:00
    Gulp + BrowserSync
    你值得拥有
    一旦用过别无他求
    riophae
        52
    riophae  
       2014-12-29 23:17:39 +08:00   ❤️ 2
    顺便附个 Gulp 入门教程 稍微长了点 但只要有耐心 你会发现这些投入非常值得
    http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
    zikkeung
        54
    zikkeung  
       2014-12-29 23:44:51 +08:00
    @pertersonvv 这是个软件
    puras
        55
    puras  
       2014-12-29 23:56:13 +08:00
    livereload不错,使用Grunt,文件变化自动刷新。。。在写EmberJS时一直用它。。。
    fullstack0xyz
        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
    fullstack0xyz
        57
    fullstack0xyz  
       2014-12-30 00:12:18 +08:00
    好吧,如果就只想要个编辑器,webstorm
    lch21
        58
    lch21  
       2014-12-30 00:24:13 +08:00
    Emacs + grunt
    pertersonvv
        59
    pertersonvv  
    OP
       2014-12-30 06:16:17 +08:00
    @Kilerd 为何不是通过工具来做呢,呵呵
    pertersonvv
        60
    pertersonvv  
    OP
       2014-12-30 06:17:16 +08:00
    @riophae 貌似很多老的经典项目,用的都是grunt,grunt还是要学的?
    是否有从grunt迁移到gulp的好法子?
    jun4rui
        61
    jun4rui  
       2014-12-30 06:55:59 +08:00
    Webstorm的自动刷新其实略微繁琐了,要用debug模式才行,每次换个文件都要手动配置一下,其实不咋地
    ryanyu104
        62
    ryanyu104  
       2014-12-30 08:52:46 +08:00
    brackets太慢了,不习惯。Sublime LiveStyle是只能css吧,F5总是卡掉,livereload应该不错。
    pertersonvv
        63
    pertersonvv  
    OP
       2014-12-30 08:54:18 +08:00
    @ryanyu104 你用过这么多啊:) bracket为何不弄的快一些?
    wwek
        64
    wwek  
       2014-12-30 08:56:46 +08:00
    Sublime LiveStyle 配置不难.
    非常爽.谁用谁知道`
    isKira
        65
    isKira  
       2014-12-30 09:20:49 +08:00
    fis release -L
    66beta
        66
    66beta  
       2014-12-30 09:23:36 +08:00
    kokdemo
        67
    kokdemo  
       2014-12-30 09:24:59 +08:00
    @lizheming “尤其适合有2个显示器或以上的高富帅使用”

    笑死了……
    alanerzhao
        68
    alanerzhao  
       2014-12-30 09:25:44 +08:00
    我觉得边想边写最好,我不喜欢写两行就刷新不过脑子,有意思么?
    kmokidd
        69
    kmokidd  
       2014-12-30 09:26:50 +08:00
    在13年末使用了一段时间的brackets 也是看中了liveload的特色 但是后来发现如果页面比较复杂brackets刷新非常慢 还不如自己F5 去年grunt对windows不够友好 现在已经非常好配置了吧 其实完全可以用grunt或者gulp的插件来替代

    说实话自动刷新之后还是会F5或者ctrl+F5 不然总觉得少了一步...
    88250
        70
    88250  
       2014-12-30 09:28:13 +08:00
    NetBeans
    msg7086
        71
    msg7086  
       2014-12-30 09:29:21 +08:00
    @fengchang Opera 表示内置自动刷新好多年了。
    pertersonvv
        72
    pertersonvv  
    OP
       2014-12-30 09:32:37 +08:00
    @alanerzhao 调效果的时候,自动刷新还是很好的吧?
    wintersun
        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环境下)能自动刷新!
    pertersonvv
        74
    pertersonvv  
    OP
       2014-12-30 09:36:14 +08:00
    @wintersun 我开发网页,用不上Ionic吧,亲:)
    hussion
        75
    hussion  
       2014-12-30 09:49:15 +08:00   ❤️ 1
    1. livereload
    2. gulp + browserSync
    3. liveStyle
    wintersun
        76
    wintersun  
       2014-12-30 09:54:17 +08:00
    @pertersonvv 我只是提供这样一种思路——你的服务端带一个WebSocket功能,并监测WebRoot文件夹下的文件变化(因为服务端也运行在本地);你写的网页客户端接收WebSocket推送,刷新浏览器! 无论你是Java+JSP,还是PHP,还是RoR,这个原理应该都可以实现吧。 而且实现一次,多个项目开发环境可以复用——与业务无关! Production时屏蔽该功能就好了! Ionic只是启发我这样联想的案例!^_^。

    @riophae推荐gulp,仔细看了下,Ionic也包含有gulp的配置,有空我再仔细研究下!
    lizheming
        77
    lizheming  
       2014-12-30 09:55:25 +08:00
    @kokdemo 噗,真是深藏功与名...没想到下拉之后会出现这么喜感的东西=。=||
    rekey
        78
    rekey  
       2014-12-30 10:05:28 +08:00 via iPhone
    @pertersonvv 还好,200多还是300多就可以了。我现在续费一年也就100多。
    LucasW
        79
    LucasW  
       2014-12-30 10:12:51 +08:00
    Brackets 不错哦,即时预览功能,开源

    可惜最近好像被Adobe绑定了些东西
    wikimo
        80
    wikimo  
       2014-12-30 11:09:51 +08:00
    ryanyu104
        82
    ryanyu104  
       2014-12-30 13:27:00 +08:00
    brackets刷新没问题 挺好的 但是作为IDE本身速度就没st快啊 我反正是用不习惯 不是我用的多啦 也是被逼出来的
    fullstack0xyz
        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
    sitin
        84
    sitin  
       2014-12-30 13:51:03 +08:00
    1. sublime+livereload
    2.vim+autorelaod
    3.brackets自身的主打功能。
    4. 使用webstorm
    5.使用grunt
    pertersonvv
        85
    pertersonvv  
    OP
       2014-12-30 13:57:38 +08:00
    @sitin 你用这么多编辑器啊?一个vim就狗血好几年了吧?
    edwinxe2v
        86
    edwinxe2v  
       2014-12-30 14:25:34 +08:00
    弱弱的说,我做了个 LIVEditor (http://liveditor.com),主要就是为了自动刷新和集成一个类Firebug的HTML Inspector,不过代码编辑功能可能有点粗糙。不知道大家有什么看法?
    sitin
        87
    sitin  
       2014-12-30 15:06:44 +08:00
    @pertersonvv 之前折腾了下,主要狗血vim中
    imeoer
        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());
    })
    soulteary
        89
    soulteary  
       2014-12-30 20:07:46 +08:00
    @lizheming 这个问题遇到富操作,交互层级比较深的时候就蛋疼了,插件liveload还是各种wactch刷新都不如[CTRL/CMD+R]一下好...(如果在调插件,有可能分分钟机器load就满了,kill -9都嗨的停不下来)

    PS:桌子上3+2的屌丝觉得那个链接那个没啥诱惑力= =
    soulteary
        90
    soulteary  
       2014-12-30 20:13:41 +08:00
    既然水了一贴,辣么正经回复一条好了。

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

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


    个人多数情况下,会直接在编辑器里写好,(脑补一下),之后再F5一下,
    个人个别情况,在调试器窗口直接在DOM上边写边预览就好。
    lizheming
        91
    lizheming  
       2014-12-30 20:17:16 +08:00
    @soulteary 我只是想说一楼说的不是F5手动刷新而是说这个工具而已...以及我一直没觉得这些工具顺手所以都是手动Ctrl+R的...
    CosWind
        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
    zxhycxq
        93
    zxhycxq  
       2016-07-22 12:16:50 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3416 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 00:41 · PVG 08:41 · LAX 16:41 · JFK 19:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.