2015年8月21日星期五

2015年8月13日星期四

webpack的babel-loader支持Object.assign

需要
npm install babel-runtime --save
然后
        loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?optional[]=runtime'}]

这里得追加上
optional[]=runtime'

https://github.com/babel/babel-loader
http://babeljs.io/docs/usage/options/
http://babeljs.io/docs/usage/runtime/

less的@import

不像c语言的include,没找到官方文档,明确如何找文件的,感觉上是

相对路径,关键得弄清楚相对谁,谁为base
1。以使用@import的文件所在base,开始找。找不到的情况下,进入下一条
2。如果lessc命令指定了
lessc --include-path=PATH1;PATH2
或者http://lesscss.org/features/
{ paths: ['PATH1', 'PATH2']  }
就以这些目录为base进行查找,找不到进入下一条  

3。以执行node命令时当前目录为base开始找,找不到也就报错咯。



2015年8月11日星期二

ionic

1。安装好jdk,android sdk,xcode。
下载http://dl.google.com/android/android-sdk_r24.3.3-macosx.zip,解压后,里面有一个SDK Readme.txt,里面写着执行tools/android upate sdk --no-ui,就会自动安装一堆,包括很老版本的sdk。如果要选择性按照,就去掉--no-ui。安装后,设置.bash_profile
export LANG=ja_JP.UTF-8
export ANDROID_HOME=/Users/jacky/Downloads/android-sdk-macosx
export PATH=$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$PATH
安装xcode就没啥好写的了。

2。按照nodejs相关的东西,我是用nodebrew,的确好用。

3。安装ionic和相关
npm install -g cordova ionic ios-sim
 
4。建立程序,并跑一下
ionic start myApp tabs
cd myApp
ionic platform add ios(android)
ionic build ios(android)
ionic emulate ios(android)
直接编译并运行 ionic run ios(android)
 
ionic的一些命令行
ionic lib update 更新ionic js的库
ionic serve --lab 在网页查看
https://github.com/driftyco/ionic-cli
http://ionicframework.com/docs/cli/
 
ionic下的各个文件和目录的作用,熟悉angular开发的话,应该就不是问题了。  目前还是用WebStorm来做的编辑。

ionic官方用来建立程序的项目太过简单,了sccs以为其他都要自己安装,太繁琐,我找了一下generator,发现有两个用的比较多,一个generator-ionic,内容充实但是用的是grunt,我一直用 gulp,一个generator-ionic-gulp看起来和目前写angular web非常一样,编译后的东西再写往ionic的www目录,所以我决定用
generator-ionic-gulp来生成项目。步骤很简单,照着git做就可以了,但最后却跑不到模拟器上(报出错8100端口网络错误),只得放弃,回退到generator-ionic。

debug
http://www.smashingmagazine.com/2014/09/testing-mobile-emulators-simulators-remote-debugging/2/

2015年5月30日星期六

日子过得很漫长

要在windows上搞node,各种坑。好不容易搞成了,记录下来。

1.node要安装 v0.10.36,11后的版本去掉了v8,各种node-gyp编译不过,比如ws,socket.io。
2.-g 安装gulp后,在项目目录下再次执行npm install --save-dev gulp还是没有用,得自己手动安装一堆
npm install gulp-angular-templatecache gulp-filter gulp-jshint gulp-load-plugins gulp-ng-annotate gulp-replace gulp-rev gulp-rev-replace gulp-useref gulp-minify-html gulp-flatten
这个命令会检查依赖,然后安装
3.安装vs2005没过去,还是vs2013才过去,就为了一个msbuild。

2015年5月27日星期三

yeoman的默认generator产生的目录结构

yo默认的generator是generator-angular,它产生的目录结构我的确是不喜欢,所谓的view都在一个目录下,然后所有的js在一个目录script下,scripts目录下分controllers,directives,services这样子,估计和ruby一样走的模式。但是这导致了一个问题,内容多了后,根据一个view要去找到自己的controller真的麻烦,还是喜欢mvc自己在自己的目录里。
拜google,找到了这个文章 ,看来大家都有这个想法。
目前找到两个指导风格
https://github.com/johnpapa/angularjs-styleguide :
└── app
    ├── app.module.js
    ├── app.config.js
    ├── app.routes.js
    ├── components       
    │   ├── calendar.directive.js  
    │   ├── calendar.directive.html  
    │   ├── user-profile.directive.js  
    │   └── user-profile.directive.html  
    ├── layout
    │   ├── shell.html      
    │   ├── shell.controller.js
    │   ├── topnav.html      
    │   └── topnav.controller.js
    ├── people
    │   ├── attendees.html
    │   ├── attendees.controller.js  
    │   ├── speakers.html
    │   ├── speakers.controller.js
    │   ├── speaker-detail.html
    │   └── speaker-detail.controller.js
    ├── services       
    │   ├── data.service.js  
    │   ├── localstorage.service.js
    │   ├── logger.service.js   
    │   └── spinner.service.js
    └── sessions
        ├── sessions.html      
        ├── sessions.controller.js
        ├── session-detail.html
        └── session-detail.controller.js  

https://github.com/mgechev/angularjs-style-guide :
├── app
│   ├── app.js
│   ├── common
│   │   ├── controllers
│   │   ├── directives
│   │   ├── filters
│   │   └── services
│   ├── home
│   │   ├── controllers
│   │   │   ├── FirstCtrl.js
│   │   │   └── SecondCtrl.js
│   │   ├── directives
│   │   │   └── directive1.js
│   │   ├── filters
│   │   │   ├── filter1.js
│   │   │   └── filter2.js
│   │   └── services
│   │       ├── service1.js
│   │       └── service2.js
│   └── about
│       ├── controllers
│       │   └── ThirdCtrl.js
│       ├── directives
│       │   ├── directive2.js
│       │   └── directive3.js
│       ├── filters
│       │   └── filter3.js
│       └── services
│           └── service3.js
├── partials
├── lib
└── test


后来我打算安装文章最后提到的generator-ng-poly
根据介绍,Inspired by John Papa's Angular Style Guide and Todd Motto's AngularJS styleguide

安装
npm install -g ng-poly gulp
ng-poly用的gulp来打包,不是用grunt了,少了io速度上前进了一步。
然后去
cd D:\WebProjects,不用先建项目的目录了。
yo ng-poly,这里会问你要建立的项目的名字,然后会根据你的名字建立目录。这里我回退了node的版本为0.11.16,因为的确0.12时会hang在home.css上,但是回退了还是没用,结果一样挂了。直接ctrl+c算了。


http://blog.jobbole.com/78946/

2015年5月10日星期日

Yeoman的generate-angular产生的目录的删除

在mac上自然直接rm,windows上却远远超过了最长path的限制,怎么都删不掉。后来google,发现可以这样删
比如要删除
D:\WebProjects\YeomanTest
用下面的手法删
cd D:\WebProjects
md a
robocopy  a YeomanTest /mir,这里会执行比较长时间,mir会将源a镜像到目的YeomanTest,所以会清除YeomanTest目录下的东西,从而达到删除的目的。
rd a
rd /s  YeomanTest

今天找到一个新的法子,远比robocopy来的快。
既然node_modules是在node里面创建出来,就在node里面删,方法如下:
先安装rimraf
npm install rimraf -g
然后执行
rimraf D:\WebProjects\YeomanTest就可以了,瞬间删除。 

yo angular要跑好大半天,难道每次都去执行一下?太慢了。想在本地copy目录,robocopy(robocopy YeomanTest YemanTest2 /mir) 也跑了好大半天,所以还是在node里面执行来的快。
npm install ncp -g
ncp YeomanTest YeomanTest2,这里虽然也会跑很久,但是比起从网上下载再untar要快不少了。