はじめまして。デザイナーのあゆみです。
Sassが流行りはじめ、Sassを使うなら一緒にGruntを使って効率化しようという記事をよく見かけますよね。
ただGruntを使うにはコマンドプロントやターミナルといった黒い画面を使わないと動かせないので、黒い画面恐怖症な私は使っていませんでした。
ですがエンジニアにGruntを導入してもらい、最初さえ頑張れば意外とできることを知ったので紹介させていただきます。

1.Node.jsをインストールする

【Windowsの場合】
WindowsはNode.js公式サイトからINSTALLボタンをぽちっと押すだけです。
Node.js公式サイト

【Macの場合】
1.ターミナルに以下をコピペしてHomebrewをインストール!

Homebrew公式サイト

Homebrewのインストールはこちらの記事が凄くわかりやすかったです。

2.Node.jsをインストールする Node.jsがインストールできたかどうか確認するには node -v と打てば確認できます。
Node.jsが入っていればnpmが自動でインストールされています。npm -v で確認できます。

なんでHomebrewを使ってインストールするのか

HomebrewとはMacのUNIXツールをインストールするためのパッケージ管理システムです。
Homebrewは極力Macに入っているものを使うように作られているのでパッケージ導入時のシステムへの負担や、
インストールにかかる時間が比較的少なくて済むそうです。またパッケージをインストール・管理する際に sudo を使う必要がありません。

2.grunt-cliをインストールする

Gruntを実行するためにはgrunt-cliが必要です。

grunt-cliは「そのディレクトリにインストールされたGruntを実行する」という処理を行ってくれるものだそうです。
引用 codegrid様

3.プロジェクトのディレクトリにpackage.jsonを入れる

サンプルのフォルダ構成

package.jsonを作成します。package.jsonは黒い画面で作成する事が出来ます。
いちいちテキストエディターからファイルを作って作成するのは手間なので、自動生成してくれるコマンドを入力して作りましょう。

コマンドを入力すると色々聞かれますがエンターを押していけば自動で
情報が記述されたpackage.jsonが生成されます。

黒い画面でプロジェクトフォルダを開く方法
【Windowsの場合】プロジェクトフォルダをshiftを押しながら右クリックすればここでコマンドウィンドウを開くがでてくるのでクリックするとプロジェクトフォルダに移動したコマンドプロントが開けます。

【Macの場合】
ターミナルをDocsに配置します。プロジェクトのフォルダをターミナルにドラッグアンドドロップすると
プロジェクトフォルダに移動したターミナルが開けます。

【package.jsonとは】

package.jsonはNode.jsのプロジェクトにおいて、そのプロジェクトの名称やバージョン、依存するモジュールを書いておくためのファイルです。

4.grunt本体、その他必要なプラグインをインストールする

プラグインをインストールすると「node_modules」 というフォルダができ、ここにプラグインが格納されていきます。

npm install grunt だけでもプラグインをインストールすることはできますが
–save-dev を記述することでプラグインをインストールする際に package.json に
プラグインの情報を記述してくれるので–save-devも書きましょう。

また必要なプラグインを複数まとめてインストールすることもできます。
以下は、 grunt-contrib-sass、grunt-contrib-watchのプラグインをインストールする例です。

ここまでのフォルダ構成

5.Gruntfile.jsを作ってディレクトリに入れる

【Gruntの設定を包み込む”wrapper”関数】
全てのGruntに関するコードはこのかっこの中に書かなくてはいけません。

例 grunt-contrib-sassを使ってscssファイルをコンパイルする。またgrunt-contrib-watchを使用し、scssファイルが変更されたらsassファイルをコンパイルする設定を記述したGruntfile.js

6.Gruntを実行する

Gruntの準備ができました!プロジェクトフォルダに移動してgruntと打てば実行されます。

style.cssが作成されました。

ここまで読んでいただきありがとうございました。
Gruntのやり方は色々書いてあるけどコマンドやGruntfile.jsの記述の意味があまり分からなくて
挫折しかけたりしたのでわかる範囲でまとめてみました。

一度gruntを動かす事が出来ればあとは他のプロジェクトフォルダにpackage.jsonをコピーし、
「npm install 」とコマンドをうてば、package.jsonで記述したプラグインをインストールしたnode_modulesフォルダが生成されます。
Gruntfile.jsもコピーして、ファイル名など該当プロジェクトに合わせて編集すればいいだけなので使い回しも出来ます!

作業の効率化は計れるし、黒い画面を自分で動かせたら感動するしいい事尽くめなのでデザイナーの皆様にも使ってみてほしいです。