LoginSignup
28
27

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-08-07

みなさん 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']

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

28
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
27