ゆたんぶろぐ

気が向いたら書いてます

grunt のインストールから初回 grunt までコマンド一発で完了させるターミナルシェルスクリプト

grunt sass Apple Terminal ShellScript haml

grunt 便利ですね！
でもいちいちインストールするのめんどくさいんです！時間の浪費、ではなく、めんどくさいんです！

ということで、grunt のインストールから初回 grunt 実行まで一発で終わらせるシェルスクリプトです。あ、毎度のことながら Mac 環境です。Windows は分かりません！

やりたいこと

  • grunt のインストール
  • 必要なファイルを作業フォルダに格納
  • 初回 grunt

ということで、まず一式格納するコピー元となるフォルダを、例えばどこかに「grunt」という名前で作るとします。

また、以下でのファイル群はあくまでもぼくが使うものなので、適宜変更してください。

各種必要なファイルを格納する

この「grunt」に以下のファイルを置いておきます。開発を始めるときの初期ファイルです。要は sass/js/haml がほぼ空の状態ってことです。

  • config.rb
  • Gruntfile.coffee
  • package.json
  • README.md
  • end.mp3
  • common.scss
  • mobile.scss
  • tablet.scss
  • webfonts.css
  • reset.css
  • common.js
  • index.haml
  • mplus-1p-regular.ttf
  • WebIconFonts.eot
  • WebIconFonts.otf
  • WebIconFonts.ttf
  • WebIconFonts.woff

「end.mp3」は astronaughts さんの grunt-play（grunt 実行後に音で教えてくれる）で必要な音声ファイル、「mplus-1p-regular.ttf」はぼくがよく使う M+WEBFONTS さんのウェブフォント、「WebIconFonts」群は chibatch さんの Web Icon Fonts で使うウェブフォントです。

Gruntfile.coffee の中身はこんな感じです。

module.exports = (grunt) ->
  pkg = grunt.file.readJSON 'package.json'
  grunt.initConfig
    compass:
      dev:
        options:
          config: 'config.rb'
          environment: 'development'
          force: true
      prod:
        options:
          config: 'config.rb'
          environment: 'production'
          force: true
    concat:
      'css/styles.css': ['src/reset.css', 'src/webfonts.css', 'css/common.css']
      'js/functions.js': ['src/common.js']
    cssmin:
      compress:
        files:
          'css/styles.min.css': ['css/styles.css']
          'css/tablet.min.css': ['css/tablet.css']
          'css/mobile.min.css': ['css/mobile.css']
    uglify:
      my_target:
        files:
          'js/functions.min.js': ['js/functions.js']
    haml:
      one:
        files:
          'index.html': 'src/index.haml'
    play:
      fanfare:
        file: './node_modules/grunt-play/sounds/end.mp3'
    watch:
      files: ['src/*.scss', 'src/*.js', 'src/*.haml']
      tasks: ['compass:prod', 'concat', 'cssmin', 'uglify', 'haml', 'play']

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

  grunt.registerTask 'default', ['compass:prod', 'concat', 'cssmin', 'uglify', 'haml', 'play']

grunt.command を作る

これを、grunt.command として「grunt」フォルダ内に格納します。

#!/bin/bash
sudo npm install -g grunt-cli
grunt_dir='/どこか/grunt/'
cp "${grunt_dir}config.rb" "${grunt_dir}Gruntfile.coffee" "${grunt_dir}package.json" "${grunt_dir}README.md" ./
sudo npm install grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-contrib-watch grunt-contrib-compass grunt-play grunt-haml --save-dev
cp "${grunt_dir}end.mp3" ./node_modules/grunt-play/sounds/
mkdir css src js
cp "${grunt_dir}common.scss" "${grunt_dir}mobile.scss" "${grunt_dir}tablet.scss" "${grunt_dir}reset.css" "${grunt_dir}webfonts.css" "${grunt_dir}common.js" "${grunt_dir}index.haml" ./src/
cp "${grunt_dir}mplus-1p-regular.ttf" "${grunt_dir}WebIconFonts.eot" "${grunt_dir}WebIconFonts.otf" "${grunt_dir}WebIconFonts.ttf" "${grunt_dir}WebIconFonts.woff" ./css/
grunt

  • grunt をインストールする
  • 設定ファイル群を開発フォルダにコピーする
  • grunt のプラグイン群をインストールする
  • grunt-play で使う音声ファイルをコピーする
  • css/src/js フォルダを作成する
  • sass/css/js/haml を src フォルダにコピーする
  • ウェブフォント群を css フォルダにコピーする
  • 初回 grunt

実行してみる

ターミナルで開発フォルダに cd します。その後、以下を実行すればそそくさと環境を整えてくれます。

$ /どこか/grunt/grunt.command

とっても楽になりますね！