V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
bitinn
V2EX  ›  Node.js

wiper: 简单的命令行, livereload 服务器 + file watch

  •  
  •   bitinn · 2015-01-21 04:58:04 +08:00 · 3021 次点击
    这是一个创建于 3594 天前的主题,其中的信息可能已经有所发展或是发生改变。
    简单点说,就是把grunt-contrib-watch模块化成单独的命令行,理由如下:

    1. 最近越发觉得npm run其实比grunt和gulp什么的省事多了,看到没有类似的包,就拿tiny-lr和gaze做了个(两者都是grunt watch的底层库,可用性有保证)。

    2. 常见的livereload实现都是直接起个服务器,而我觉得没必要逼用户选express或koa,拆开之后,把插入script的工作交给其他模块,更方便开发。

    3. 太多watch命令不支持-w **/*.js,**/*.css的格式,大概是因为逗号可以当路径吧,但说实话有多少人在开发repo里这样做,以简单为主。

    有需要的可收藏与扩展。

    忘了加链接: https://github.com/bitinn/wiper

    PS:建议v2ex node节点改回白色算了,好歹md还能用……
    10 条回复    2015-02-21 02:31:19 +08:00
    yyfearth
        1
    yyfearth  
       2015-01-21 07:06:54 +08:00   ❤️ 1
    对于3 你可以做成 -w **/*.js -w **/*.css 这样
    另外最好可以支持配制文件 比如 .wiper.json 支持详细的参数 而且这样类似 make 你就可以不加任何参数运行

    其实我也自己做了一个类似的东西 整合 warth + livereload 和你不同的是 我做的本身就是一个http server
    而且支持 自动编译 coffee/less/jade 之类的模板

    不用grunt的原因是 grunt需要npm在项目里面安装一大堆的东西
    而我做的那个是一个独立的程序 可以在任何目录运行 不用安装额外的东西
    bitinn
        2
    bitinn  
    OP
       2015-01-21 14:10:42 +08:00
    @yyfearth 的确,但感觉不是很符合习惯,nodemon就是这样的看了半天文档才知道。

    wiper就是想模块化,避免增加太多功能或再跑一个完整的http server,然后在npm集成。例如:

    ```
    "cp:dev": "npm run cp:css:watch & npm run cp:js:watch & npm run cp:reload",
    "cp:reload": "wiper -p 30001 -w public/js/*.js,public/css/*.css",
    "cp:css:build": "lessc services/composer/composer.less | autoprefixer -o public/css/app.css",
    "cp:css:watch": "onchange 'services/composer/**/*.less' -- npm run cp:css:build",
    ```
    bitinn
        3
    bitinn  
    OP
       2015-01-21 14:13:45 +08:00
    如果不是为了模块化,一体化的livereload+watch+build+monitor解决方案倒不少,希望强大功能的,还可以看看browser-sync,当然强大功能的背后也是一个不省油的dev server。
    yyfearth
        4
    yyfearth  
       2015-01-21 15:54:08 +08:00
    一个简单的http server 也就几十行代码 而且可以做到自动注入js 和端口共用
    livereload server本身差不多也就百来行
    watch我也是自己用fs实现的 也就几十行吧

    不加compiler 之需要socket.IO一个依赖而已
    yyfearth
        5
    yyfearth  
       2015-01-21 15:57:18 +08:00
    其实现在我还是都用gulp了
    因为之前是自己有一小堆 小项目 结构都差不多 需要的东西基本上都一样
    我那样做确实比较方便

    但是现在我做项目的时候 每个项目差距还是比较大的
    很多build的task需要特别配置 甚至需要自己实现很多功能
    这样一来用grunt或者gulp这样可以高度自定义 而且每个项目相互独立配置
    确实比较好

    所以我自己的那个项目 更新了几个版本 自己都不用了
    bitinn
        6
    bitinn  
    OP
       2015-01-22 13:14:29 +08:00
    @yyfearth 写了两年grunt,我意识到npm可以20来行解决的东西,放到gruntfile里常是100来行。当然不是说grunt或gulp有多不好。只是我终于明白想substack等人的说法,不要一上来就用grunt,安装一堆插件,写一个巨大的gruntfile。很多时候npm即可。
    CosWind
        7
    CosWind  
       2015-01-22 14:40:11 +08:00
    额。。。glup也不要多少行。。
    devtiange
        8
    devtiange  
       2015-02-08 03:16:57 +08:00
    @bitinn 感谢楼主分享

    有个弱弱的问题:
    <script src="//localhost:1234/livereload.js?snipver=1"></script>
    这种语句加在html里面, 你是怎么做到dev的时候加, 正式build不加的? 能不能提供个基于npm流的思路? 谢谢!
    bitinn
        9
    bitinn  
    OP
       2015-02-21 00:45:31 +08:00
    @devtiange 用environment variable控制,例如写在npm里,根据环境不同使用不同的启动命令。获得值之后,if/else选择时候是否加载。

    http://stackoverflow.com/questions/4870328/how-to-read-environment-variable-in-node-js
    devtiange
        10
    devtiange  
       2015-02-21 02:31:19 +08:00
    @bitinn 所以必须要搭配 jade 或者 handlebars 这种模板咯? 可是我就想写.html 呢...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2342 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 01:01 · PVG 09:01 · LAX 17:01 · JFK 20:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.