素人趣味のWeb制作ブログ

素人趣味でやってるWeb制作とかプログラミングとかそっち系の話題についてのブログです。

素人趣味でやってるWeb制作とかプログラミングとかそっち系の話題についてのブログです。

CoffeeScript+jQueryプラグインなGruntfile.jsを書いた

jQueryプラグインを書く機会が多いのでCoffeeScript+jQueryプラグインGruntfile.jsを書いてみました。
行数あるので続きにて。

ソースコード

Gruntfile.js

module.exports = function(grunt) {

    var pkg = grunt.file.readJSON('package.json');

    grunt.initConfig({
        pkg: pkg,
        
        watch: {
            files: ['*.coffee'],
            tasks: ['coffee', 'uglify', 'concat']
        },
        
        coffee: {
            compile: {
                options: {
                    bare: true
                },
                expand: true,
                cwd: './',
                src: ['jquery.*.coffee'],
                dest: './',
                rename: function(dest, src){ return dest + src.replace('.coffee', '.js') }
            }
        },
        
        uglify: {
            targets: {
                files: {
                    'jquery.<%= pkg.name %>.min.js': ['jquery.<%= pkg.name %>.js']
                }
            }
        },
        
        concat: {
            options: {
                stripBanners: true,
                banner: '/*!\n' +
                        ' * jquery.<%= pkg.name %>.js - v<%= pkg.version %> - https://github.com/<%= pkg.author.name %>/jquery.<%= pkg.name %>.js\n' +
                        ' * <%= pkg.description %>\n' +
                        ' * \n' +
                        ' * \n' +
                        ' * Copyright (c) <%= pkg.license.since %> <%= pkg.author.name %> (<%= pkg.author.url %>)\n' +
                        ' * Licensed under the <%= pkg.license.name %> license (<%= pkg.license.url %>).\n' +
                        ' * <%= grunt.template.today("yyyy-mm-dd") %>\n' +
                        ' **/\n;'
            },
            files: {
                expand: true,
                cwd: './',
                src: ['jquery.*.js'],
                dest: './'
            }
        }
    });
    
    for(var taskName in pkg.devDependencies) {
        if(taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }
    
    grunt.registerTask('default', ['watch']);

};

package.json

{
  "name": "hoge",
  "version": "0.0.1",
  "description": "foo",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/kerotaa/bar.git"
  },
  "author": {
    "name": "kerotaa",
    "url": "http://kerotaa.hateblo.jp/"
  },
  "license": {
    "name": "MIT",
    "url": "http://www.opensource.org/licenses/mit-license.php",
    "since": "2013"
  },
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib": "~0.6.1"
  }
}

解説

[coffeeでコンパイル]→[uglifyで圧縮]→[concatでバナー追加] という流れになってます。

coffeeでコンパイルする際にexpandMappingextオプションを使用するとファイル名がおかしくなるので、 renameオプションで.coffee.jsに置換してやってます。(参考:File extension removes not just last original file extension but everything after first dot.

rename: function(dest, src){ return dest + src.replace('.coffee', '.js') }

特筆すべき箇所はこれぐらいです。
あとはファイルパスとバナーとpackage.jsonをアレンジするだけ!