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

[bitinn]

简单点说，就是把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还能用……

[yyfearth]

对于3 你可以做成 -w **/*.js -w **/*.css 这样
另外最好可以支持配制文件 比如 .wiper.json 支持详细的参数 而且这样类似 make 你就可以不加任何参数运行

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

不用grunt的原因是 grunt需要npm在项目里面安装一大堆的东西
而我做的那个是一个独立的程序 可以在任何目录运行 不用安装额外的东西

[bitinn]

@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]

如果不是为了模块化，一体化的livereload+watch+build+monitor解决方案倒不少，希望强大功能的，还可以看看browser-sync，当然强大功能的背后也是一个不省油的dev server。

[yyfearth]

一个简单的http server 也就几十行代码 而且可以做到自动注入js 和端口共用
livereload server本身差不多也就百来行
watch我也是自己用fs实现的 也就几十行吧

不加compiler 之需要socket.IO一个依赖而已

[yyfearth]

其实现在我还是都用gulp了
因为之前是自己有一小堆 小项目 结构都差不多 需要的东西基本上都一样
我那样做确实比较方便

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

所以我自己的那个项目 更新了几个版本 自己都不用了

[bitinn]

@yyfearth 写了两年grunt，我意识到npm可以20来行解决的东西，放到gruntfile里常是100来行。当然不是说grunt或gulp有多不好。只是我终于明白想substack等人的说法，不要一上来就用grunt，安装一堆插件，写一个巨大的gruntfile。很多时候npm即可。

[CosWind]

额。。。glup也不要多少行。。

[devtiange]

@bitinn 感谢楼主分享

有个弱弱的问题:
<script src="//localhost:1234/livereload.js?snipver=1"></script>
这种语句加在html里面, 你是怎么做到dev的时候加, 正式build不加的? 能不能提供个基于npm流的思路? 谢谢!

[bitinn]

@devtiange 用environment variable控制，例如写在npm里，根据环境不同使用不同的启动命令。获得值之后，if/else选择时候是否加载。

http://stackoverflow.com/questions/4870328/how-to-read-environment-variable-in-node-js

[devtiange]

@bitinn 所以必须要搭配 jade 或者 handlebars 这种模板咯? 可是我就想写.html 呢...