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

  • 8
    Like
  • 0
    Comment
More than 1 year has passed since last update.

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

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

やりたいこと

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

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

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

この「grunt」に以下のファイルを置いておきます。開発を始めるときの初期ファイルです。

  • config.rb
  • Gruntfile.coffee
  • package.json
  • README.md
  • 各種 .sass
  • 各種 .coffee
  • 各種ウェブフォントのリソース
  • 各種 .py など

grunt-play」は astronaughts さんの grunt 実行後に音で教えてくれる神プラグイン、「mplus-1p-regular.ttf」はぼくがよく使う M+WEBFONTS さんのウェブフォント、「WebIconFonts」群は chibatch さんの Web Icon Fonts で使うウェブフォント、「fontello」群は fontello さんのウェブフォントです。

Gruntfile.coffee の中身は Gruntfile.coffee の中身をまとめてみた - Qiita をご覧ください。

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-coffee grunt-contrib-compass grunt-contrib-concat grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-uglify grunt-este-watch grunt-play grunt-slim grunt-ssh --save-dev
mkdir css src js
cp "${grunt_dir}_include.sass" "${grunt_dir}common.sass" "${grunt_dir}fonts.sass" "${grunt_dir}mobile.sass" "${grunt_dir}reset.sass" "${grunt_dir}tablet.sass" ./src/
cp "${grunt_dir}desktop.coffee" "${grunt_dir}functions.coffee" "${grunt_dir}mobile.coffee" ./src/
cp "${grunt_dir}common.html" "${grunt_dir}config.yml" "${grunt_dir}data.py" "${grunt_dir}functions.py" "${grunt_dir}index.html" "${grunt_dir}index.py" "${grunt_dir}index.slim" "${grunt_dir}view.py" ./src/
cp "${grunt_dir}fontello.eot" "${grunt_dir}fontello.svg" "${grunt_dir}fontello.ttf" "${grunt_dir}fontello.woff" "${grunt_dir}mplus-1p-regular.ttf" "${grunt_dir}WebIconFonts.eot" "${grunt_dir}WebIconFonts.otf" "${grunt_dir}WebIconFonts.ttf" "${grunt_dir}WebIconFonts.woff" ./css/
grunt w
  • grunt をインストールする
  • 設定ファイル群を開発フォルダにコピーする
  • grunt のプラグイン群をインストールする
  • css・src・js フォルダを作成する
  • sass などを src フォルダにコピーする
  • ウェブフォント群を css フォルダにコピーする
  • 初回 grunt

実行してみる

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

$ /どこか/grunt/grunt.command

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