LoginSignup
7

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-11-20

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7