フロントエンド開発で使うフレームワークを調べてみた

各フレームワークも設定ファイルの書き方を調べてみた

フロントエンド開発にはいろいろな方法がありますね. 納品物は static な html のみの場合, その作り方や使用するツールは開発者さんの好みだったり使い慣れてるものだったりすると思います.

よく使われている(と勝手に思っている)フレームワークをまとめておこうと思って書きました. ひとまず貼り付け. 後でちゃんと書きますね!:P

やりたいことは,

• 納品物は static な html ファイル
• ローカルで開発するために web サーバ起動
• ファイル更新を監視 + 自動でコンパイル

の最小限のタスクを想定しています.

ビルドツール

Grunt(http://gruntjs.com)

• Node.js 製. 老舗なフレームワーク.
• Jade, sass, coffeeScript が使われる印象.

# Gruntfile.coffee
module.exports = (grunt) ->
  grunt.loadNpmTasks('grunt-contrib')

  grunt.initConfig
    connect:
      server:
        options:
          port: 9000
          base: '.'

    watch:
      coffee:
        files: 'src/**/*.coffee',
        tasks: ['coffee']

    coffee:
      compile:
        files:
          'dist/all.js': [
            'src/**/*.coffee'
          ]

  grunt.registerTask('run', ['coffee', 'connect', 'watch:coffee'])

テンプレつくりました:)

## 使い方
$ npm install
$ grunt watch

gulp(http://gulpjs.com)

• Node.js 製. 去年末に出てきた若手.
• 同じく Jade, coffeeScript が使われる印象. (スタイルシートは stylus 使ってみました)

// gulpfile.js
require('coffee-script/register');
require('./gulpfile.coffee');

# gulpfile.coffee
gulp = require('gulp')
coffee = require('gulp-coffee')
uglify = require('gulp-uglify')
concat = require('gulp-concat')
connect = require('gulp-connect')
jade = require('gulp-jade')
stylus = require('gulp-stylus')


paths =
  coffee: ['./src/js/*.coffee']
  jade: ['./src/*.jade']
  styl: ['./src/css/*.styl']


gulp.task 'watch', ->
  gulp.watch(paths.coffee, ['coffee'])
  gulp.watch(paths.jade, ['jade'])
  gulp.watch(paths.styl, ['styl'])
  return


gulp.task 'coffee', ->
  return gulp.src(paths.coffee)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('./all.min.js'))
    .pipe(gulp.dest('./dist/js/'))


gulp.task 'jade', ->
  return gulp.src(paths.jade)
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./dist/'))


gulp.task 'styl', ->
  return gulp.src(paths.styl)
    .pipe(stylus())
    .pipe(gulp.dest('./dist/css/'))


gulp.task 'connect', ->
  connect.server
    root: 'dist'
    livereload: true
    port: 9000


gulp.task 'default', ['watch', 'connect']

テンプレつくりました:)

(※追記 いくつかプラグインを追加したので, 上に書いた設定ファイルと異なります.)

## 使い方
$ npm install
$ gulp

gulpfile.coffee がより直感的に書きやすい気もします.

静的サイトジェネレータ

Middleman(http://middlemanapp.com)

• ruby 製. Rails の Views 部分だけを取り出してフロントエンド開発に最適化したような子.
• Slim, sass, coffeeScript が使われる印象.

# config.rb
Slim::Engine.set_default_options :pretty => true
Slim::Engine.set_default_options :shortcut => {
  '#' => {:tag => 'div', :attr => 'id'},
  '.' => {:tag => 'div', :attr => 'class'},
  '&' => {:tag => 'input', :attr => 'type'}
}

set :css_dir, 'css'
set :js_dir, 'js'
set :images_dir, 'img'

activate :automatic_image_sizes
activate :livereload

configure :build do
  activate :minify_css
  activate :minify_javascript
  activate :cache_buster
  activate :relative_assets
end

activate :deploy do |deploy|
  deploy.method = :sftp
  # deploy.host = 'xxx'
  # deploy.user = 'xxx'
  # deploy.password = 'xxx'
  # deploy.path = 'xxx'
end

テンプレつくって Gem にしました:)

## 使い方
$ middleman init <プロジェクト名> --template scaffold
$ bundle install --path vendor/bundle
$ middleman server

Roots(http://roots.cx)

• Node.js 製. 小さくつくるサイトジェネレータ. ミニマルな設計が個人的には好み.
• デフォルトの設定ファイル(生成される app.coffee) で今のところ十分.
• Jade, stylus, coffeeScript が使われる印象.

## 使い方
$ roots new <プロジェクト名>
$ roots watch 
$ roots compile  # コンパイル

ざっとまとめてみました.
随時追加 + 修正していきます. 他にも便利なツールがあったら PR おねがいします!