grunt-contrib-jshint の設定

Naoki Sekiguchi — Wed, 16 Apr 2014 04:38:01 +0000

Gruntfile.coffee に以下のように書く。

grunt.loadNpmTasks 'grunt-contrib-jshint'
grunt.initConfig(
  jshint:
    main:
      options:
        jshintrc: true
      src: [ 'app' + sitePath + 'js/script.js' ]
  ...
  watch:
    js:
      options:
        livereload: true
      files: [ 'app' + sitePath + 'js/*' ]
      tasks: [ 'jshint' ]
)

options.jshintrc = true を設定するとそれ以外の options は無視され同階層に置かれた .jshintrc ファイルを参照するようになる。

.jshintrc はJSON形式で記述する。
結果的に以下のような設定に。

{
  "node": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  ...
  "globals": {
    "window": true,
    "document": true,
    "jQuery": true,
    "$": true,
    "_": true,
    "Backbone": true
  },
  "-W116": true,
  "-W041": true
}

globals には「XXXグローバルオブジェクトがない」的な警告が出るときに、予め「このグローバルオブジェクトはあるから、警告出すな」とJSHint側に伝えておく設定。
-WXXX: true は特定のエラーを無視したいときに追加する設定。このエラーコード（ドキュメントの原文では warning code）は grunt --verbose（もしくは grunt -v）として verbose モードで Grunt タスクを起動すると表示されるようになる。

表示例：

^ [W116] Expected '!==' and instead saw '!='.

ここでは W116 というのが warning code なのでそれを "-W116": true のように options に追加すると、警告は出なくなる。

サイトの裏側を書き直した

Naoki Sekiguchi — Sun, 13 Apr 2014 16:53:41 +0000

自分のサイトを更新するモチベーションが沸々と約2年半ぶりに湧き上がり、現在業務で使っているツールや知識を使って裏側を書き直した。今回変えたのは以下のような点。

Grunt 導入
プロトタイプ環境と本番環境を分けた
WordPressシステムファイル以外のソースコードを GitHub で管理するようにした
Twitter API version 1.1 への対応（遅っ！）

Twitter API を利用しているのはトップページでリスト表示をしているところだけだが、Twitter API 1.0 が廃止されてから1年近く放置してしまった…。お恥ずかしい限り。

Grunt を導入したことでパッケージ管理をぜんぶ bower に任せられたし、必要なやつだけ grunt-contrib-copy でコピーして deploy 環境に置く、みたいなことができてめちゃくちゃ整理ができた。2年半前と開発環境はえらい違い。

突貫工事だったので JavaScript とか LESS とかは適当。まだ途中のところとかあるし。
あとでやりたいこと↓

JavaScript を CoffeeScript で書き直す
Bootstrap を始めとしたパッケージ群を最新版にして WordPress テーマを書き直す

Grunt – Like@Lunatic

grunt-contrib-jshint の設定

サイトの裏側を書き直した