wiper: 简单的命令行， livereload 服务器 + file watch
bitinn · 2015-01-21 04:58:04 +08:00 · 3009 次点击这是一个创建于 3585 天前的主题，其中的信息可能已经有所发展或是发生改变。
简单点说，就是把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还能用……
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
 |
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在项目里面安装一大堆的东西 而我做的那个是一个独立的程序 可以在任何目录运行 不用安装额外的东西 |
 |
2
bitinn OP @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", ``` |
|
3
bitinn OP 如果不是为了模块化，一体化的livereload+watch+build+monitor解决方案倒不少，希望强大功能的，还可以看看browser-sync，当然强大功能的背后也是一个不省油的dev server。
|
|
4
yyfearth 2015-01-21 15:54:08 +08:00
一个简单的http server 也就几十行代码 而且可以做到自动注入js 和端口共用
livereload server本身差不多也就百来行 watch我也是自己用fs实现的 也就几十行吧 不加compiler 之需要socket.IO一个依赖而已 |
|
5
yyfearth 2015-01-21 15:57:18 +08:00
其实现在我还是都用gulp了
因为之前是自己有一小堆 小项目 结构都差不多 需要的东西基本上都一样 我那样做确实比较方便 但是现在我做项目的时候 每个项目差距还是比较大的 很多build的task需要特别配置 甚至需要自己实现很多功能 这样一来用grunt或者gulp这样可以高度自定义 而且每个项目相互独立配置 确实比较好 所以我自己的那个项目 更新了几个版本 自己都不用了 |
|
6
bitinn OP @yyfearth 写了两年grunt，我意识到npm可以20来行解决的东西，放到gruntfile里常是100来行。当然不是说grunt或gulp有多不好。只是我终于明白想substack等人的说法，不要一上来就用grunt，安装一堆插件，写一个巨大的gruntfile。很多时候npm即可。
|
 |
7
CosWind 2015-01-22 14:40:11 +08:00
额。。。glup也不要多少行。。
|
 |
8
devtiange 2015-02-08 03:16:57 +08:00
@bitinn 感谢楼主分享
有个弱弱的问题: <script src="//localhost:1234/livereload.js?snipver=1"></script> 这种语句加在html里面, 你是怎么做到dev的时候加, 正式build不加的? 能不能提供个基于npm流的思路? 谢谢! |
|
9
bitinn OP @devtiange 用environment variable控制，例如写在npm里，根据环境不同使用不同的启动命令。获得值之后，if/else选择时候是否加载。
http://stackoverflow.com/questions/4870328/how-to-read-environment-variable-in-node-js |
Select Language