ズッキーニのプログラミング実験場

プログラミング + アカデミック + 何か面白いこと。 記載されているものは基本的に私が所属する団体とは関係がありません。

   Nov 24

[Grunt][CoffeeScript]ファイルを更新したら自動でCoffeeScriptからminifyされたJSを生成する

by zuqqhi2 at 2013年11月24日
Pocket

目的

ソースファイルを常に監視していて、
更新されたらすぐにテストを流してコンパイル・ミニファイをするような仕組みを作る。
gruntを使用するとこれが実現できる。

インストール

必要なものをインストールする。
これはpackage.jsonで、npm installでインストールさせることにする。
gruntから下が必要なもの。

{
  "name": "sample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "mocha": "1.14.0",
    "chai":  "*",
    "coffee-script": "1.6.3",
    "sinon": "1.7.3",
    "grunt": "0.4.2",
    "grunt-cli": "0.1.11",
    "grunt-contrib-watch": "0.5.3",
    "grunt-coffeelint": "0.0.7",
    "grunt-contrib-coffee": "0.7.0",
    "grunt-simple-mocha": "0.4.0",
    "grunt-contrib-uglify": "0.2.7"
  }
}

Gruntfile.coffee

Gruntの設定ファイルは以下のようにする。

module.exports = (grunt) ->

  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'

    coffeelint:
      app:
        files:
          src: [
            'models/*.coffee'
            'specs/*.coffee'
          ]

    simplemocha:
      all:
        src: ['specs/*.coffee']
      options:
        reporter: 'nyan'
        ui: 'bdd'

    coffee:
      compile:
        files: [
          'libs/something.js': 'models/something.coffee',
          'libs/something2.js': 'models/something2.coffee'
        ]
      options:
        bare: yes

    uglify:
      compress_target:
        options:
          sourceMap: (fileName) ->
            fileName.replace /\.js$/, '.js.map'
        files: [
          expand: true,
          cwd: 'libs/',
          src: ['*.js'],
          dest: 'libs/',
          ext: '.min.js'
        ]
 watch:
      scripts:
        files: [
          'models/*.coffee'
          'specs/*.coffee'
        ]
        tasks: [
          #'coffeelint'
          'coffee'
          'simplemocha'
          'uglify'
        ]
        options:
          interrupt: yes

  grunt.loadNpmTasks 'grunt-coffeelint'
  grunt.loadNpmTasks 'grunt-simple-mocha'
  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-contrib-uglify'

  grunt.registerTask 'default', [
    #'coffeelint'
    'coffee'
    'simplemocha'
    'uglify'
  ]

watch

以下のwatchの部分が常にファイルを監視する部分。

watch:
      scripts:
        files: [
          'models/*.coffee'
          'specs/*.coffee'
        ]
        tasks: [
          #'coffeelint'
          'coffee'
          'simplemocha'
          'uglify'
        ]
        options:
          interrupt: yes

filesのところが監視するファイル。
tasksのところはファイルの更新があったら実行するタスク。

coffee

以下のcoffeeのところがcoffee scriptをコンパイルする部分。

coffee:
      compile:
        files: [
          'libs/something.js': 'models/something.coffee',
          'libs/something2.js': 'models/something2.coffee'
        ]
      options:
        bare: yes

filesの”:”の左側がコンパイル結果の出力ファイルで右側がコンパイル対象のファイル。

simplemocha

以下がテストの部分。
src:の部分でmochaのテストファイルを指定する。

    simplemocha:
      all:
        src: ['specs/*.coffee']
      options:
        reporter: 'nyan'
        ui: 'bdd'

uglify

以下がミニファイする部分。
cwdのsrcにあるファイルをdest以下に出力する。その際の拡張子はextのようにする。

    uglify:
      compress_target:
        options:
          sourceMap: (fileName) ->
            fileName.replace /\.js$/, '.js.map'
        files: [
          expand: true,
          cwd: 'libs/',
          src: ['*.js'],
          dest: 'libs/',
          ext: '.min.js'
        ]

実行結果

ファイルを更新すると以下のような感じになる。

Waiting...
OK
>> File "specs/something1.coffee" changed.

Running "coffee:compile" (coffee) task
File libs/something1.js created.
File libs/something2.js created.

Running "simplemocha:all" (simplemocha) task
 5   -_-_-__,------,
 0   -_-_-__|  /\_/\
 0   -_-_-_~|_( ^ .^)
     -_-_-_ ""  ""

  5 passing (66ms)


Running "uglify:compress_target" (uglify) task
Source Map "libs/something2.min.js.map" created.
File "libs/something1.min.js" created.
Source Map "libs/something1.min.js.map" created.
File "libs/something1.min.js" created.

Done, without errors.
Completed in 2.046s at Sun Nov 24 2013 18:14:35 GMT+0900 (JST) - Waiting...

Related Posts

  • 2013年6月2日 [Backbonejs][Javascript]インストール Backbone.jsの準備 まずは必要なライブラリのダウンロード。 次は、テスト用のhtmlとjsを作成。 動作確認して準備OK! coffee scriptを加えてみる ここを 参考にしてnpmを入れる。 […]
  • <!--:ja-->[CoffeeScript][Jasmine-node]環境構築<!--:--><!--:en-->[CoffeeScript][Jasmine-node]Setup<!--:-->2013年3月11日 [CoffeeScript][Jasmine-node]環境構築 Jasmine-node インストールメモ コマンドのみ Only Command
  • 2013年6月13日 [CoffeeScript]多次元尺度構成法 やりたいこと 多次元尺度構成法とは多次元のデータを少ない次元で表現する方法。 データ間の距離の関係だけを見て決める。 この多次元尺度構成法のデモをcoffee scriptで実装してみる。 ソースコード モデル […]
  • 2013年7月28日 [node.js][express][coffeescript] RESTful API part1 やりたいこと node.jsとexpressとcoffeescriptでRESTfulなAPIを作りたい。 環境準備 Coffee Scriptでモデルを書く リクエストラインをValidateするモデルを作ってみる。 […]
  • <!--:ja-->[Test][CoffeeScript]Coffee Script Mocha Blanket でC0カバレッジを計測する<!--:--><!--:en-->[Test][CoffeeScript]Measure coverage with Coffee Script Mocha Blanket<!--:-->2014年7月13日 [Test][CoffeeScript]Coffee Script Mocha Blanket でC0カバレッジを計測する 概要 Coffee Script Mocha Blanket でのC0カバレッジを計測する。 環境 OS: Ubuntu 12.04LTS Node.js […]
  • <!--:ja-->[CoffeeScript]HTML5のCanvasでアニメーション<!--:--><!--:en-->[CoffeeScript]Animation with Canvas on HTML5<!--:-->2013年6月12日 [CoffeeScript]HTML5のCanvasでアニメーション とある統計のアルゴリズムの動きを視覚的に確認したいがために、 それの全段階としてCoffeeScriptとHTML5のCanvasでアニメーション処理を書いてみた。 まずmain.coffee。 […]
Pocket

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.