最近のフロントエンドの初期設定。一応WordPress案件用に作ったけど他でも使えます。macであればinit.shすればだいたいokです。

.bowerrc

{
  "directory": "vendor/assets/bower_components",
  "json": "bower.json"
}

.gitignore

node_modules
vendor
.sass-cache
assets/dist

composer.json

{
    "name": "wptheme",
    "authors": [
        {
            "name": "Hiroshi Urabe",
            "email": "[email protected]"
        }
    ],
    "require": {
        "php": ">=5.4"
    },
    "autoload": {
        "psr-4": {
            "Torounit\\WPLibrary\\": "lib/WPLibrary"
        }
    }
}

config.rb

require 'autoprefixer-rails'
require 'csso'


on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << AutoprefixerRails.process(css)
  end
end

css_dir = 'assets/stylesheets'
sass_dir = 'assets/sass'
images_dir = 'assets/images'
fonts_dir = 'assets/fonts'
javascripts_dir = 'assets/javascripts'
sass_options = { :sourcemap => true }
output_style =  (environment == :production) ? :compressed : :nested
line_comments = (environment == :production) ? false : true
relative_assets = false
add_import_path 'vendor/assets/bower_components/'

Gemfile

source 'https://rubygems.org'

gem 'sass', '>=3.3.0'
gem 'compass', '~> 1.0.0'
gem 'autoprefixer-rails', '~> 2.1.1.20140710'
gem 'csso-rails', '~> 0.3.4'
gem 'kss'

Gruntfile.coffee

module.exports = (grunt) ->

  # ==================================
  #
  # Load Tasks.
  #
  # ==================================
  pkg = grunt.file.readJSON('package.json')

  for taskName of pkg.devDependencies
    grunt.loadNpmTasks taskName  if taskName.substring(0, 6) is 'grunt-'



  # ==================================
  #
  # Grunt Initalize.
  #
  # ==================================

  grunt.initConfig

    # ==================================
    #
    # Directory Setting.
    #
    # ==================================
    dir:
      assets: 'assets'
      coffee: '<%= dir.assets %>/src/scripts'
      javascripts: '<%= dir.assets %>/dist/scripts'
      vendor: '<%= dir.assets %>/vendor'
      stylesheets: '<%= dir.assets %>/dist/styles'
      sass: '<%= dir.assets %>/src/styles'


    # ==================================
    #
    # Watch file.
    #
    # ==================================
    esteWatch: {
      options:
        dirs:[
          "./"
          '<%= dir.sass %>/**'
          '<%= dir.coffee %>/**'
          '!vendor/assets/**/**'
        ]
        extensions: ['scss','coffee','js','css','php']
        livereload:
          extensions: ['js','css','php',"scss"]
          enabled: true

      scss: (filepath) ->
        return ["compass:dev"]


      coffee: (filepath) ->
        return ["browserify"]

    }


    # ==================================
    #
    # Compass
    # use config.rb.
    #
    # ==================================

    compass: {
      dev: {
        options: {
          bundleExec: true
          config: 'config.rb'
          environment: 'development'
        }
      }

      dist: {
        options: {
          bundleExec: true
          config: 'config.rb'
          environment: 'production'
        }
      }
    }

    # ==================================
    #
    # minify css.
    #
    # ==================================

    cssmin: {
      minify: {
        expand: true,
        cwd: '<%= dir.stylesheets %>',
        src: ['*.css', '!*.min.css'],
        dest: '<%= dir.stylesheets %>',
        ext: '.min.css'
      }
    }

    # ==================================
    #
    # browserify
    #
    # ==================================

    browserify:
      dist:
        files:
          '<%= dir.javascripts %>/all.js': ['<%= dir.coffee %>/all.coffee']
        options:
          transform: ['coffeeify' , "debowerify"]
          debug: true
          browserifyOptions:
            extensions: ['.coffee']


    # ==================================
    #
    # grunt-image
    #
    # ==================================

    image:
      dynamic:
        options:
          pngquant: true
          optipng: true
          advpng: true
          zopflipng: true
          pngcrush: true
          pngout: true
          mozjpeg: true
          jpegRecompress: true
          jpegoptim: true
          gifsicle: true
          svgo: true

        files: [
          expand: true
          cwd: "<%= dir.assets %>/src/images/"
          src: ["**/*.{png,jpg,gif,svg}"]
          dest: "<%= dir.assets %>/dist/images/"
        ]


    # ==================================
    #
    # Style Guide
    #
    # ==================================

    # KSS styleguide generator for grunt.
    kss:
      options:
        includeType: 'css'
        includePath: '<%= dir.stylesheets %>/all.css'
      dist:
        files:
          'docs/styleguide': ['<%= dir.sass %>']


    # ==================================
    #
    # minify javascripts.
    #
    # ==================================
    uglify:
      compress:
        files:
          '<%= dir.javascripts %>/all.min.js': ['<%= dir.javascripts %>/all.js']


  # ==================================
  #
  # Register Task.
  #
  # grunt           - watch and Compile.
  # grunt build     - compile scss and javascript
  # grunt build:dist - complie assets for dist
  #
  # ==================================

  grunt.registerTask 'default', ['esteWatch']
  grunt.registerTask 'build', ['compass:dev','browserify','image']
  grunt.registerTask 'build:dist', ['compass:dist','cssmin','browserify', "uglify", "image"]

init.sh

#!/bin/bash
npm install
bundle install
composer install
bower install
grunt build:dist

package.json

{
  "name": "wptheme",
  "version": "0.0.1",
  "description": "Winesummit grunt task",
  "main": "Gruntfile.coffee",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Toro_Unit",
  "license": "GPL v2 or later",
  "devDependencies": {
    "browserify": "^5.11.1",
    "coffee-script": "^1.7.1",
    "coffeeify": "^0.7.0",
    "debowerify": "^0.8.1",
    "grunt": "^0.4.5",
    "grunt-browserify": "^3.0.1",
    "grunt-contrib-clean": "0.6.0",
    "grunt-contrib-coffee": "^0.10.1",
    "grunt-contrib-compass": "^1.0.1",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.4.1",
    "grunt-este-watch": "^0.1.17",
    "grunt-image": "^0.8.4"
  }
}