Grunt+BowerでつくるWebアプリケーションひな形

ハッカソンに参加するときとか、ちょっとしたWebサイトをつくるときとか、アプリケーションのテンプレートを持っていると開発にかかる時間を大きく短縮できる。特にbootstrapやjQueryをダウンロードして、過去のリソースを切り貼りして...という作業を毎回行うのは面倒なので、自分用のWebアプリケーションひな形を作成した。

Mrk1869/updraft

tornadoのひな形なのでupdraft(上昇気流)と呼んでいるけど、main.pyを変更すれば静的なサイトやsinatraのプロジェクトでも利用できる。

check Features

bootstrap, jQuery, backbone, underscoreのセットアップ
Gruntを使ったcoffee scriptとsassの自動コンパイル

setup Require

bower, grunt, coffee, sassを使うので、インストールしていなければ準備が必要。npmコマンドが使えない場合は、導入はNodeとパッケージ管理システム(Macの場合はHomebrewなど)について勉強してからのほうがいいかもしれない。

$ npm install -g bower
$ npm install -g grunt-cli
$ npm install -g coffee-script
$ gem install sass

setup Installation

Mrk1869/updraft からデータをダウンロードしてきたら、そのディレクトリに入って

# 必要なパッケージをインストール
$ npm install

# bootstrapなどをダウンロードしてassets/以下に配置する
$ grunt bower:install

# coffee, sassの監視を開始する
$ grunt

これでひな形の準備は完了です。

以下は補足説明。

code bower.json

{
  "name": "updraft",
  "version": "0.0.0",
  "description": "Web application template",
  "license": "MIT",
  "ignore": [
    "**/.*",
  "node_modules",
  "bower_components",
  "test",
  "tests"
    ],
  "devDependencies": {
    "bootstrap": "~3.1.1",
    "backbone": "~1.1.2",
    "underscore": "~1.6.0",
    "jquery": "~2.1.1"
  },
  "exportsOverride": { //main fileが設定されていないライブラリをassetsにコピーするための設定
    "bootstrap": {
      "js": "dist/js/bootstrap.min.js",
      "css": "dist/css/bootstrap.min.css"
    },
    "backbone": {
      "js": "backbone.js"
    },
    "underscore": {
      "js": "underscore.js"
    },
    "jquery": {
      "js": "dist/jquery.min.js"
    }
  }
}

Bowerとはフロントエンド用のパッケージマネージャ。jQueryやTwitterBootstrapなどの定番ライブラリを、サイトを巡回することなく下記のようなコマンドで集めてくることができる。

$ bower install jquery

しかしbowerでインストールしたライブラリはbower_components以下の複雑な場所に配置されるため、それらを扱いやすい場所(assets/ lib/など)にコピーしたい。そこでGruntを使う。コピーの対象となるファイルをmain fileとして設定していないライブラリもあるので、コメント部のようにjs, cssファイルの場所を指定する必要がある。

参考: Bower入門(基礎編) - from scratch

code Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({

    // bowerでインストールしたライブラリをassets以下に置く
    bower: {
      install: {
        options: {
          targetDir: './assets',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: false,
          cleanBowerDir: false
        }
      }
    },

    // sassのコンパイル
    sass: {
      compile: {
        src: 'assets/_scss/*.scss',
        dest: 'assets/css/style.css'
      }
    },

    // coffeeのコンパイル
    coffee: {
      compile: {
        src: 'assets/_coffee/*.coffee',
        dest: 'assets/js/script.js'
      }
    },

    // sassとcoffeeの更新を監視する
    watch: {
      scss: {
        files: 'assets/_scss/*.scss',
        tasks: ['sass']
      },
      coffee: {
        files: 'assets/_coffee/*.coffee',
        tasks: ['diary']
      }
    }

  });
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.registerTask('default',  ['sass', 'coffee', 'watch']);
};

grunt-bower-taskによってライブラリをコピーする。はじめの方にあるbower:installはそれに関する設定。grunt-contrib-watchによってsassとcoffeeの更新を検知して、sass:compile, coffee:compileタスクを実行するよう設定している。

5/11 追記

昨今の自分用Webアプリケーションひな形その2 - Grunt - naoyaのはてなダイアリー

を参考に、Gruntfileをcoffeeに書きなおしました。また、Procfileを作成して

application: python main.py --port=8000 --debug=True
grunt: grunt

foreman startでgruntとtornadoが起動するようにしました。