Grunt.jsを使ったWeb制作のワークフロー

タスクを加える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
実行するタスクを複数に増やします。
講師:
03:07

字幕

このレッスンでは Grunt の プラグインを使ったタスクを 増やしてみたいと思います 今開いている gruntfile.js なんですけれども contrib-concat という ファイルを複数連結して一つにするという プラグインなんですが それを使って ここに入っている JavaScript ファイル全部を このパスに script.js として まとめて作る 一つのファイルに作るという風にしています この処理を別のパスに対しても 行ってみましょう ということなので ちょっとこれをコピーしましょう そしてペーストです 名前は勿論変えないといけません プロダクションというディレクトリを 作りたいので 頭をとって prod にしました それから プロパティが複数に増えていますので カンマ区切りが必要です パスは builds の中は一緒でここを production としましょう そして保存をします 先にプロジェクトのフォルダ gruntworkflows を開いてみます そうすると builds の中に development がありますけれども production というフォルダはありません けれどもこのフォルダは自動的に作られます ではコマンドラインツールのターミナルから Grunt のコマンドを入力します ディレクトリは既に gruntworkflows の方に移っています ここで grunt タスクの名前は concat ですね そしもし prod だけ実行したい といった場合にはその後コロンで prod とすれば prod で定めた タスクだけが実行されます こうでなければ prod だけでなくて 全てのタスクが実行される 結果としてどちらでも同じですので こちらで実行してしまいましょう エンターキーで実行です 二つのタスクが実行されました という風に出ていますね dist と prod と両方実行されました そして エラーはありませんと出ていますので フォルダの方を確認しましょう プロジェクトの gruntworkflows のフォルダの中には builds に production という フォルダが出来上がりました そして中を見ると js の中に script.js 同じものが入っていますね production のディレクトリは 新たに加えられたという事が確認できました このレッスンでは Grunt のプラグイン contrib-concat で実行するタスクを 二つに増やしてみました prod という タスクを加えてカンマ区切りで この dist と同じ様に 指定すれば良いということです

Grunt.jsを使ったWeb制作のワークフロー

Gruntは開発におけるコンパイルやビルドを自動化するツールです。これを使えば煩わしい作業の繰り返しから解放されます。このコースではGruntのインストールや定義ファイルの作り方、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを実際に使いながら説明します。またフロントエンド用のパッケージマネージャBowerについても紹介します。

2時間05分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年02月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。