您的位置:首页 > 其它

笔记

2015-09-29 17:04 295 查看
9.28
利用grunt搭建了一个静态文件服务器,并添加了浏览器自动打开页面+监听自动刷新

"connect-livereload": "~0.5.3",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-connect": "~0.10.1",
"grunt-open": "~0.2.0"


引入模块加载器require.js

9.29
根据UI稿标注,确定了移动端元素大小的自适应方案。
使用rem,因为chrome移动端模拟器只能支持最小6px的字号,考虑到调试和方便计算:
以二倍屏&&html{font-size:10px}&&全屏宽度==(设计稿px宽/10/2)个rem为css取值基准

//UI 是640的标注
document.documentElement.style.fontSize=window.innerWidth/32+'px';
//UI稿640=DPR*maxWidth (window.devicePixelRatio)
//设屏宽320px=32rem,屏宽分成32rem,1rem=10px

//标注上所有px,基于公式[css=标注/20]转换为css的rem


10.10
解决本地开发环境调用server端接口的跨域问题,暂用Access-Control-Allow-Origin *

10.21
打通分享再呼起进入的流程,交互demo部署测试环境;

10.23
include file等功能纯html无法实现,调研尝试使用服务端语言php、nodejs、shtml

10.25
基于项目需求和技术风险考虑,决定放弃使用服务端语言,调研并测试成功以下前端解决方案:
nodejs-express-ejs-supervisor服务端环境开发,grunt-ejs编译发布为静态化文件html,自定义config.json保存js&&css静态文件Root等等

10.26
code1—code2调用native—code3
ios可以顺利执行code1,native,code3
Android只执行code1,native
呵呵,Android同步执行也就罢了,code3竟然也给我断掉了。解决,settimeout搞成延时异步。

11.30
静态服务添加代理grunt-connect-proxy 完美解决开发跨域问题

11.2
安装sass,添加grunt编译,添加connect中间件即时编译,加入监听
不想用ruby,在git上发现可以用node-sass && grunt-sass

npm源管理http://segmentfault.com/a/1190000000473869 http://snoopyxdy.blog.163.com/blog/static/60117440201422695653698/ 真是日了狗了,node-sass费劲周折又是nrm换源又是换代理的总算是装上了,配置了outFile之后竟然不会自动写文件,还要我手动调用fs,醉了...
好在找到了grunt-sass,再给connect配上node-sass-middleware,即时编译即时刷新,非常完美

//node-sass 安装测试

var sass = require('node-sass');
var fs= require('fs');
var outFilePath="a.css";
sass.render({
file: "a.scss",
// sourceMap: true,
outputStyle: 'compact',//nested expanded compact compressed
outFile: outFilePath
}, function(err, result) {
console.log(result.css.toString());
if(!err){
// No errors during the compilation, write this result on the disk
fs.writeFile(outFilePath, result.css, function(err){
if(!err){
//f ile written on disk
}
});
}
});


var sassMiddleware = require('node-sass-middleware');
var sassSnippet = sassMiddleware({
/* Options */
src: "build/scss/", //请求为xx.css的时候,会在这个文件夹里寻找xx.scss,并编译出xx.css放到dest中
dest: "build/css/", //dest未设置时,默认为src
debug: true,
outputStyle: 'compact',
prefix: '/build/css' //html引入的<link rel="stylesheets" href="css/home.css"/>中需要忽略掉的父目录(该中间件会判断xx.css的文件,全部去dest里定义的路径里去取,所以此处需要设置忽略)(绝对目录"/"一定要带着)
});


11.4
node-sass-middleware不爽,多终端多页面打开时,监听到scss修改会同时刷新所有页面,这会导致sass会同时编译N次
需要去掉中间件,搞成监听scss,编译css,刷新页面

11.6
解决单个页面内,不同业务状态下,多元素显隐控制逻辑

1

adf
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: