tinytool
v1.3.7
Published
based on gulp
Downloads
10
Readme
基于gulp、requirejs、zepto、stylus、ejs。
开发使用
- 需要在项目的package.json配置:
"config": {
"port": 你的端口号,
"namespace": 你的namespace,
"host": "feresource.com"
}
npm install tinytool --registry=https://registry.npm.taobao.org
nohup tinytooldev connect &(只在首次,之后Server服务就一直后台运行,除非异常或关机)
编译出压缩后代码,使用NODE_ENV=production tinytool css
编译出未格式化代码,使用tinytool css
如果发现修改文件不生效,可以ctrl+C退出之后使用tinytool watch
如果发现修改文件不生效,可以ctrl+C退出之后使用tinytool watch
如果希望编译出压缩后代码,可以ctrl+C退出之后使用NODE_ENV=production tinytool watch
如果希望只watch css代码,可以ctrl+C退出之后使用tinytool watchcss
如果希望图片压缩(只针对.jpg、.png结尾图片压缩),可以使用tinytooldev tinyimg,然后到dist/[你的namespace]/src/resourcetinyimg目录下找到对应图片,然后替换原有图片
本地需要绑定host:127.0.0.1 feresource.com
访问地址:http://feresource.com:[你的端口号]/[你的namespace] (如果服务访问不了端口被占用,可参考小技巧)
在页面中添加可使用livereload模式:<script src="http://feresource.com:[你的端口号]/[你的namespace]/third/livereload.js"></script>
小技巧
- 检查端口占用:lsof -i :[你的端口号]
- kill对应进城:kill -9 PID
构建工具功能:
- ~~本地Server,支持实时编译资源 done~~
- ~~支持amd,模块加载方案,异步,同步 done~~
- ~~支持stylus解析 done~~
- ~~支持资源(js,css)压缩,嵌套,合并 done~~
- ~~支持ejs和html的require到js里面 done~~
- ~~支持require json文件到js里面 done~~
- ~~gulp watch编译报错时不再影响下一次watch done~~
- ~~支持npm run方式图片压缩 done~~
- ~~支持接口mock done~~
- ~~支持代码检查eslint done~~
- ~~支持实时编译时通过参数查看压缩后代码 done~~
- ~~如果build编译报错,停止编译,watch模式除外 done~~
- ~~支持增量编译 done~~
- ~~支持可选的实时刷新 done~~
- ~~支持编译报错提醒 done~~
- ~~支持背景图版本加后缀自动更新 done~~
- 支持html公共部分include(gulp-file-include)
- ~~图片压缩使用gulp-imagemin,现在速度太慢 done~~
- 以下为低优先级
- 报错系统提醒
- 支持自动添加define头和尾(gulp-header\gulp-footer)
- 实时刷新替换为socket模式,gulp connect的方式似乎有问题
- 支持source map
- 支持资源生成base 64(图片等)
- 支持单元测试
- 支持生成文档(jsdoc)
常用gulp插件
- https://www.jianshu.com/p/df65ae89b862
- gulp-rev,根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系。
- gulp-stylint,linter for stylus
- EJS-Lint,缺失gulp相关插件
- gulp-notify,报错系统提醒