読者です 読者をやめる 読者になる 読者になる

ゆたんぶろぐ

気が向いたら書いてます

Gruntfile.js を CoffeeScript で書いて見やすくする

みなさん grunt 使ってますか?便利ですよ!

さて、「Gruntfile.jsは.coffeeのほうが扱いやすい ::ハブろぐ」を見ると、Gruntfile.js を CoffeeScript で書いてもちゃんと grunt さんは認識してくれるらしいので、CoffeeScript で書いてみました。

以下は grunt watch すれば、src/*.sass や src/*.js、src/*.haml の保存時に、次の処理を自動で実行してくれるステキな設定です(ぼくはこれでしか grunt を使ってないけど...)。

  1. src/*.sass -> css/*.css へのコンパイル
  2. css 内と js 内の指定ファイルの concat
  3. css の指定ファイルの minify
  4. js の指定ファイルの minify
  5. src/*.haml -> *.html へのコンパイル
  6. 終了音の再生

module.exports = (grunt) ->
  pkg = grunt.file.readJSON 'package.json'
  grunt.initConfig
    compass:
      dev:
        options:
          config: 'config.rb'
          environment: 'development'
          force: true
      prod:
        options:
          config: 'config.rb'
          environment: 'production'
          force: true
    concat:
      'css/styles.css': ['src/reset.css', 'src/webfonts.css', 'css/common.css']
      'js/functions.js': ['src/common.js']
    cssmin:
      compress:
        files:
          'css/styles.min.css': ['css/styles.css']
          'css/tablet.min.css': ['css/tablet.css']
          'css/mobile.min.css': ['css/mobile.css']
    uglify:
      my_target:
        files:
          'js/functions.min.js': ['js/functions.js']
    haml:
      one:
        files:
          'index.html': 'src/index.haml'
    play:
      fanfare:
        file: './node_modules/grunt-play/sounds/end.mp3'
    watch:
      files: ['src/*.scss', 'src/*.js', 'src/*.haml']
      tasks: ['compass:prod', 'concat', 'cssmin', 'uglify', 'haml', 'play']

  for t of pkg.devDependencies
    if t.substring(0, 6) is 'grunt-'
      grunt.loadNpmTasks t

  grunt.registerTask 'default', ['compass:prod', 'concat', 'cssmin', 'uglify', 'haml', 'play']

凄く見やすくなりましたね!