仙台 Ruby Vim JavaScript 社長

片平堂のブログ

Vagrant環境下でのgrunt watchでファイル監視の反映に時間がかかるので、webstormの自動保存を無効にした

↓ こちらのとおりです。
WebStorm/PhpStorm メモ - 自動保存を停止したい - {u:b}

うーん、あまり変わらない気がする。別のところに原因がありそう。

Vagrant環境でload-grunt-taskを使ったGruntのtaskが遅いのでjit-gruntに変えた

インストール

% npm install jit-grunt -D
% npm uninstall load-grunt-tasks -D

jit-gruntを使うようにGruntfile.coffeeを書き換え。
後、watchにspawn: falseも追加しといた。

#Gruntfile.coffee

 module.exports = (grunt) ->
 
   # Load grunt tasks automatically
-  require("load-grunt-tasks")(grunt)
+  require('jit-grunt')(grunt)
+  grunt.loadNpmTasks('grunt-connect-proxy')
+  grunt.loadNpmTasks('grunt-protractor-runner')
+  grunt.loadNpmTasks('grunt-google-cdn')
+  grunt.loadNpmTasks('grunt-usemin')
 
   # Time how long tasks take. Can help when optimizing build times
   require("time-grunt")(grunt)

# ----------------省略------------------
   # Watches files for changes and runs tasks based on the changed files
     watch:
+      options:
+        spawn: false
# package.json
     "grunt-wiredep": "^1.7.0",
+    "jit-grunt": "^0.8.0",
     "jshint-stylish": "^0.2.0",
# ----------------省略------------------
     "karma-spec-reporter": "0.0.13",
-    "load-grunt-tasks": "^0.4.0",
     "protractor": "^1.0.0",

jit-gruntは load-grunt-tasksだと読み込んでくれてたものを読み込んでくれないパッケージがある*1ので、読み込んでくれないパッケージは明示的にloadNpmTasksする。 どれが読み込まれないのかよくわからなかったら、差し替えてtaskを実行してみれば見つからないと表示してくれるので、それを読みこめばOK.

jit-grunt: Plugin for the "useminPrepare" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings

早くなりました。

参考

*1:読み込み規則がちがう

deprecatedが出ていたngminからng-annotateへ切り替え

AngularJSのminify対策をしてくれるアレ。
例によって、generator-angularで作ったプロジェクトでの話。
grunt-ng-annotateをインストールしてgrunt-ngminを外して、記述をngminからngAnnotateにしただけでいけました。

% npm install grunt-ng-annotate -D
diff --git a/package.json b/package.json
index 77190a9..e1f2b1a 100644
--- a/ngapp/package.json
+++ b/ngapp/package.json
@@ -25,7 +25,7 @@
     "grunt-google-cdn": "^0.4.0",
     "grunt-karma": "^0.8.3",
     "grunt-newer": "^0.7.0",
-    "grunt-ngmin": "^0.0.3",
+    "grunt-ng-annotate": "^0.3.2",
     "grunt-protractor-runner": "^1.1.0",
     "grunt-svgmin": "^0.4.0",
     "grunt-usemin": "^2.1.1",
-- a/Gruntfile.coffee
+++ b/Gruntfile.coffee
@@ -300,10 +300,7 @@ module.exports = (grunt) ->
           dest: "<%= yeoman.dist %>"
         ]

-  # ngmin tries to make the code safe for minification automatically by
-  # using the Angular long form for dependency injection. It doesn't work on
-  # things like resolve or inject so those have to be done manually.
-    ngmin:
+    ngAnnotate:
       dist:
         files: [
           expand: true
@@ -443,7 +440,7 @@ module.exports = (grunt) ->
     "concurrent:dist"
     "autoprefixer"
     "concat"
-    "ngmin"
+    "ngAnnotate"
     "copy:dist"
     "cdnify"
     "cssmin"

CoffeeScriptでAngularJSのテスト書いている時に暗黙的に最後の行を returnする仕様に気をつける

まんまこれ↓
CoffeeScript で AngularJS のテストを書くときに気をつけること - Qiita

'use strict'

describe 'Service: AwesomeInterceptor', ->

  httpProvider = {}
  # load the service's module
  beforeEach module 'myApp',($httpProvider)->
    httpProvider= $httpProvider
    return # <- つけた

#.........

Karma-Jasmineの出力結果表示形式をRspec風にしたい

f:id:yuichi_katahira:20140827112945p:plain

そっけないです.....

karma-spec-reporterをインストールして設定する。

% npm install karma-spec-reporter -D
# karma.conf.coffee
  plugins: [
       'karma-phantomjs-launcher'
       'karma-jasmine'
       'karma-coffee-preprocessor'
+     'karma-spec-reporter'
       'karma-coverage'
     ]

-     reporters: ['progress','coverage']
+    reporters: ['spec','coverage']

f:id:yuichi_katahira:20140827113013p:plain

OK.

Railsのwrap_parametersは何をしてくれるのか?

Action Controller Overview — Ruby on Rails Guides
↑ここに書いてある。

config/initializers/wrap_parameters.rbはRails4.1だとデフォルトで多分こうなっている。↓

 Be sure to restart your server when you modify this file.

# This file contains settings for ActionController::ParamsWrapper which
# is enabled by default.

# Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array.
ActiveSupport.on_load(:action_controller) do
  wrap_parameters format: [:json] if respond_to?(:wrap_parameters)
end

# To enable root element in JSON for ActiveRecord objects.
# ActiveSupport.on_load(:active_record) do
#  self.include_root_in_json = true
# end

この設定のままの場合は要するに'application/json'でJSONRailsへ送った時にルート要素を省いて送れる。

//↓これが
{ "user": { "name": "katahirado", "address": "Kakyouin" } }
//↓こう送れる
{ "name": "katahirado", "address": "Kakyouin" }

↓Controllerへ送るとパラメータはこうなる

{ name: "katahirado", address: "Kakyouin", user: { name: "katahirado", address: "Kakyouin" }}

何が嬉しいのかというと、例えばAngularJSとかからJSONを送るときに$resourceで処理しやすい、でもって、Rails側では通常と変わらずUser.new(params[:user])と出来る*1、とかそういう感じで。

ちなみにController名にしたがってラップされるので、そこは注意が必要。
例えばDeviseのRegistrationsControllerの場合は、registration: {...}とラップされてる。

DeviseはJSON考慮に入れてないので、APIとかの用途の場合はSorceryとか、自前とか、oAuthの仕組みに乗るとかしたほうが良さ気。

*1:説明の為にStrongParametersを省いてます

Yeomanのgenerate-angularで作成したプロジェクト(CoffeeScript)にKarma-Coverageを導入する

ココを見ましょう。

ありがとうございます。

やった内容

// package.json

 "karma-coverage": "git+https://github.com/mokemokechicken/karma-coverage.git#master",
% npm l
#karma.conf.js
       'karma-phantomjs-launcher'
       'karma-jasmine'
       'karma-coffee-preprocessor'
+      'karma-coverage'
     ]

# ............................................

-    preprocessors: '**/*.coffee': ['coffee']
+    preprocessors:
+      'app/scripts/*.coffee': 'coffee'
+      'app/scripts/*/**/*.coffee': 'coverage'
+      'test/**/*.coffee': 'coffee'
 
     # Uncomment the following lines if you are using grunt's server to run the tests
     # proxies: '/': 'http://localhost:9000/'
     # URL root prevent conflicts with the site root
     # urlRoot: '_karma_'
+
+    reporters: ['progress','coverage']

OK.そのうち解決されることを願いつつ。

参考