はじめに

  • HTMLは書きたくない
    Jadeを使いましょう
  • CSSは書きたくない
    Stylus+nibで書いていきます。
    正直Sass+Compassが古くなる時代が来るとは思っていませんでした。
    ※この辺は正直、好みですので僕もSass+Compass構成で書くこともあります。
  • Javascriptは書きたくない
    CoffeeScriptを使用する。
    しっかり型付けを意識したいときはTypeScriptを使ってますが、イライラが凄いです、記法がだるい。
    mizuchi先生、TypedCoffeeScriptはよ！
  • 車輪の再発明はしたくない
    Bower+npm+Browserifyで既存のライブラリを最大限使用する。
  • コンパイル作業は楽にやりたい
    Grunt is God
    Gulpは別に嫌いではないですが、後で何やってるのかをぱっと見る時にツリーで閉じれるのでGruntfileの方が好きなんです。

フォルダ構成

ProjectRoot
├── dist(コンパイル先)
│      ├──css(main.css)
│      ├──js(common.js)
│      ├──img
│      ├──lib(vender)
│      └──index.html
├── src(コンパイル前)
│      ├──coffee(common.coffee)
│      ├──jade(index.jade)
│      ├──img
│      └──styl(main.styl)
├─.bowerrc
├─bower.json
├─bower_components(bower installのインストール先)
├─package.json
└─node_modules(npm installのインストール先)
└─s3auth.json(AWSS3にファイルを送るための設定)

npmの設定

package.jsonの生成

1 $ npm init

必要なモジュールをインストール

  • おそらくglobalに突っ込んでいる事が多いが、他の人が使うことも考えて
    明示的に何を使っているのか示しておいた方がいい
1 $ npm install grunt install --save-dev
2 $ npm install bower install --save-dev
3 $ npm install browserify --save-dev

bowerの設定

.bowerrcを作っておく

1 {
2   "directory": "bower_components"
3 }

bower.jsonの生成

1 $ bower init
  • 色々コマンドラインで聞かれるので必要な情報を入力していく

bower へのパッケージ追加

1 $ bower install [packagename] --save //本番でも使用
2 $ bower install [packagename] --save-dev //開発版だけ使用
  • 基本的な使用方法はnpmと殆ど同じですね。

s3auth.jsonを書く

{
  "accessKeyId": "Your Access Key",
  "secretAccessKey": "Your Secret Access key",
  "region": "ap-northeast-1",//東京
  "bucket": "Your Hosting Bucket"
}
  • 必要に応じて書き換えて下さい。

Gruntfile.coffee

  • 後で解説書く
  1 module.exports = (grunt) ->
  2   'use strict'
  3   grunt
  4     .initConfig
  5       pkg: grunt
  6         .file
  7         .readJSON "package.json"
  8       s3auth: grunt
  9         .file
 10         .readJSON 's3auth.json'
 11       aws_s3:
 12         options:
 13           accessKeyId: '<%= s3auth.accessKeyId %>'
 14           secretAccessKey: '<%= s3auth.secretAccessKey %>'
 15           region: '<%= s3auth.region %>'
 16           access: '<%= s3auth.access %>'
 17         production:
 18           options:
 19             bucket: '<%= s3auth.bucket %>'
 20             differential: true
 21           files: [
 22             expand: true
 23             cwd: 'dist/'
 24             src: '**'
 25             dest: ''
 26           ]
 27         clean_production:
 28           options:
 29             bucket: '<%= s3auth.bucket %>'
 30             debug: true
 31           files: [
 32             dest : '/'
 33             action: 'delete'
 34           ]
 35       browserify:
 36         dist:
 37           files:
 38             'dist/js/main.js': ['src/coffee/main.coffee']
 39           options:
 40             transform: [
 41               'coffeeify'
 42               'debowerify'
 43             ]
 44             browserifyOptions:
 45               extensions: ['.coffee']
 46       stylus:
 47         app:
 48           files:
 49             expand : true
 50             cwd : 'src/styl'
 51             src : ['**/*.styl', '*.styl']
 52             dest : 'dist/css'
 53             ext : '.css'
 54       jade:
 55         compile:
 56           options:
 57             pretty: true
 58           files: [
 59             expand: true
 60             cwd: "src/jade"
 61             src: [
 62               "sp/*.jade"
 63               "*.jade"
 64               "!mixin/*.jade"
 65             ]
 66             dest: "dist"
 67             ext: ".html"
 68           ]
 69       bower:
 70         install:
 71           options:
 72             targetDir: "dist/lib"
 73             layout: 'byType'
 74             install: true
 75             cleanTargetDir: true
 76             cleanBowerDir: false
 77       sitemap:
 78         dist:
 79           siteRoot: 'dist/'
 80           homepage: 'http://www.hogehoge.com/'
 81       connect:
 82         server:
 83           options:
 84             port: 3000
 85             hostname: "*"
 86             base: 'dist'
 87             livereload: 35729
 88       esteWatch:
 89         options:
 90           dirs: [
 91             "src/coffee/**"
 92             "src/jade/**"
 93             "src/sass/**"
 94             "dist/**"
 95           ]
 96           livereload:
 97             enabled: true
 98             extensions: ['js', 'html', 'css']
 99             port: 35729
100         "coffee": (path) ->
101           ["newer:browserify"]
102         "jade": (path) ->
103           ["jade"]
104         "sass": (path) ->
105           ["compass"]
106   grunt
107     .loadNpmTasks 'grunt-contrib-jade'
108   grunt
109     .loadNpmTasks 'grunt-contrib-connect'
110   grunt
111     .loadNpmTasks 'grunt-contrib-stylus'
112   grunt
113     .loadNpmTasks 'grunt-este-watch'
114   grunt
115     .loadNpmTasks 'grunt-newer'
116   grunt
117     .loadNpmTasks 'grunt-bower-task'
118   grunt
119     .loadNpmTasks 'grunt-sitemap'
120   grunt
121     .loadNpmTasks 'grunt-browserify'
122   grunt
123     .loadNpmTasks 'grunt-aws-s3'
124   grunt.registerTask 'make', ['bower', 'newer:browserify', 'jade', 'stylus', 'sitemap']
125   grunt.registerTask 'default', ['make', 'connect', 'esteWatch']
126   grunt.registerTask 'publish', ['aws_s3:clean_production', 'aws_s3:production']