ブラウザリロード不要。Gruntの超軽快コーディングをすぐに使えるサンプルファイルで

Gruntとは

今回やろうとしていること

事前に準備しておく事

• バージョン0.8.0以上のnode.js
• npm(node package manager)

gitを使ったnvmセットアップと複数バージョンのnode.jsインストール及びその切替え方法のご紹介 Tettori 開発者向け。国内・海外から旬な情報をお届けします：テットリ Top News Designer Developer Other About 2014年 08月 9日 gitを使ったnv …

インストール手順

1. ターミナルを起動し、以下のコマンドを順に実行します
2. npmをアップデート

   npm update -g npm

3. grunt-cli(Command line interface)をインストール

   npm install -g grunt-cli

動作確認

1. こちらをクリック

   tettori/sample.gruntjs | Github

2. ページ右側にある”Download ZIP”をクリックしてファイル一式をダウンロード。
3. ダウンロードした圧縮ファイルを解凍します。
4. ターミナルを起動し、cdコマンドでダウンロードしたフィルダまで移動します

   ターミナルで簡単にフォルダ移動する方法

   ターミナル内でディレクトリを移動する際ディレクトリ名をタイプしていく必要がありますが、こちらの方法を覚えておくととても楽にディレクトリを移動できるので便利です。 “cd “とタイプし、ウィンドウ内に移動先フォルダを直接ドラッグ＆ドロップ
   
   移動先が張り付くので、Enterを押だけで移動できます
   

5. こちらのコマンドを実行します（ブラウザが起動し、”hello world”の文字が表示されます）

   grunt server

6. フォルダ内のhtml,css,jsファイルを編集する事でブラウザの表示が自動更新されます

動画で確認

いかがでしたでしょうか

• Dart,TypeScript,coffeescript等のjs系コンパイル
• Sass,Less等のCSS系のコンパイル
• 構文テスト
• アグリファイ(難読化)
• ミニファイ(ファイルサイズ圧縮)
• 構文テスト

もっと詳しく知りたい方へ

Grunt: The JavaScript Task Runner Why use a task runner? In one word: automation. The less work you have to do when performing repetit …

Plugins – Grunt: The JavaScript Task Runner Plugins This plugin listing is automatically generated from the npm module database. Officially mai …

Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) – ＠IT ＠ITメルマガ購読キャンペーン実施中：Surface Pro 3 が当たる！新規ID登録Myページ 自分研TestDesignSecurityNetworkLinuxDBJavaCodingSmart …