http://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

http://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

angular的动画，nganimate

https://docs.angularjs.org/api/ngAnimate，白话顺一遍 。
有几个方式来实现
1. css动画，CSS-based Animations
A。用css 的transition
例子

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition: opacity 0.5s linear 0s;
  opacity:0;这是动画开始属性
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;这是动画结束属性
}

transition的设置是：http://www.htmq.com/css3/transition.shtml

第一个是要trans的属性名(opacity)，

第二个是要持续多长时间(0.5s)，

第三个是用的算法(linear)，

第四个是delay多久才执行(0s)。

B.用keyframe来实现

例子

.fade.ng-enter {

  animation: fadeIn 1s; 
}，这里的fadeIn一般用别人的，animation.css里面定义了不少keyframe。

用keyframe方法不需要实现-active来表示结束。

 CSS Staggering Animations这个好像没啥用，因为staggering指定的值，

可以用transtion的第四个值指定啊 

JavaScript-based Animations类型的，没jquery的话，自己好像比较难搞。

去掉debug log信息

search了一下，知道目前有一个gulp-strip-debug可以用来去掉 console, alert, and debugger，但是这个不是我想要的，因为我自己封装了一个logger。
再找，说gulp-uglify自己就带的有参数，drop_console可以去掉debugger，也并不是我想要的。另外http://lisperator.net/uglifyjs/compress里面可以定义变量，然后压缩的时候就会去掉里面的代码，这个的确是不错，我用的是gulp-uglify，它后面是call的uglifyjs，看https://www.npmjs.com/package/gulp-uglify
所以可以
  .pipe($.uglify({ compress: {global_defs: {DEBUG: false}}})).on('error', conf.errorHandler('Uglify'))
来传递进去。这样在做production的时候，就会去删掉debug的代码。挺好。但是问题是，岂不是代码里到处都是if (DEBUG)。继续找

最后看到了gulp-defeatureify，直接设置去掉哪些功能，雖然它主要是給ember用的，但是仍然可以給angular用。
    .pipe($.defeatureify({enableStripDebug: true, debugStatements: ['log.debug', 'log.debug.apply']}))
這樣，所有的log.debug代碼就都給去掉了。

要留意的是，它删不掉这样的
self(this).log.debug('xxxx')

也就是， debugStatements里面设置的，必须是点[.]下去的的。

 

调试gulp

1。要安装gulp-intercept
npm install gulp-intercept --save-dev

2。执行node-inspector
C:\Users\Jacky>node-inspector
Node Inspector v0.12.3
Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to start debugging.

3。windows上调试gulp，需要到应用的目录下
node-debug "C:\Users\Jacky\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js" styles，这个会发现node-inspector，然后连接上node-inspector后启动chrome
 unix上面 执行node-debug $(which gulp) styles

4。在chrome里面单步就可以了。

虽然这样可以调试gulp了，但是gulp的那一堆的pipe却是不行的，要想查看pipe里面的内容，需要用到gulp-print，gulp-debug，或者gulp-intercept，
gulp-print只能打印出filename
gulp-debug可以打印出filename以外的内容，但是仍然打印不出文件的内容自身
gulp-intercept才是最强，可以打印出所有的内容。

测试代码如下


    .pipe(wiredep(_.extend({}, conf.wiredep)))
    //.pipe($.print())      //only can print filename
    /*.pipe($.print(function(filepath) { //custom print filename
      return "built: " + filepath;
      })
    )
    .pipe($.intercept(function(file){
      //https://www.npmjs.com/package/vinyl
      //console.log('file: ' + JSON.stringify(file));
      console.log('file.cwd: ' + file.cwd );
      console.log('file.base ' + file.base );
      console.log('file.path: ' + file.path );
      console.log('file.history: ' + file.history );
      console.log('file.relative : ' + file.relative);
      console.log('file.dirname : ' + file.dirname);
      console.log('file.basename : ' + file.basename);
      console.log('file.extname : ' + file.extname);
      //https://nodejs.org/api/fs.html#fs_class_fs_stats
      console.log('file.stat: ' + JSON.stringify(file.stat));
      //console.log('file.contents.type: ' + file._contents.type);
      //console.log('file.contents: ' + file.contents.toString() );
      return file;})
    )*/
    //.pipe($.debug({title: 'zyz debug:', minimal: false}))