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

JavaScriptファイルを連結する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
gruntfile.jsを定義して、contrib-concatで複数のファイルをひとつに連結します。
講師:
09:26

字幕

このレッスンでは Grunt のプラグインを使って 複数のファイルを一つにまとめてみます どのファイルをどういう風に 連結するのかという事を示すために プロジェクトのフォルダを開けました この gruntworkflows というのが そうですけれども 先ず プラグインなんですけれども node_modules ここに package や プラグインが NPM によって収められていきます Grunt 本体と ファイルを連結してくれるのは この contrib-concat このプラグインを使います では どのファイルを連結するのかというと この components というのは 開発用の素材や スクリプト こちらは CSS の元になります そして scripts の中には 開発中の JavaScript という 想定なんですけれども JavaScript ファイルが三つあります 実際に ウェブに上げるのは サイトに上げるのはこちらになります その development index.html がありますね そして js というフォルダに 最終的に JavaScript ファイルを収めるんですが ここにはまだ json ファイルしかありません この三つのファイル ポンとコピーしても良いんでしょうけれども ファイル三つ比較的小さいですね サーバーから一々ロードすると 負荷が無駄に高くなります ですからこれらのファイルは 一つにまとめてしまった方が良いんですね これらを一つにまとめて この js フォルダの中に入れようという事です そのためにこの grunt-contrib-concat と というプラグインを使います Grunt でタスクと実行するには JavaScript ファイルを書きます タスクの定義の JavaScript と言えばいいんでしょうか gruntfile.js という名前に決まっています その例がこの Grunt のサイトの 少し下の方に書いてあるんですけれども ここですね 実際に 認証で行う作業は これとは違うんですけれども 基本的な形は一緒です まずモジュールという オブジェクトのexports というプロパティに関数を定めます その関数は Grunt のオブジェクトを受け取りますので このオブジェクトに対して 色々設定をするんですが 先ずこちらですね これがプラグインの読み込みになります loadNpm Tasks NPM でモジュール プラグインを読み込んでいますので そのプラグインを実行するんだよ という事です 今回私達が使うのは grunt-contrib-concat になります そして実際にどういうタスクを実行するのか 先ほど言いました通り このファイルをここに持って行くんだよ どう言う名前で といった事を grunt.initConfig という所で タスクの内容ですね それを 定義してオブジェクトとして渡します この内容はプラグインによって違いますので 実際に練習をしてみましょう Dreamweaver CC を 開いていますけれども ここで新規のJavaScript ファイルを 開きます そして名前は先ほど言った通り gruntfile.js です 先ず先に保存してしまいましょう 保存する場所は package.json と同じ場所です ここに色んな作業の定義 等が入っている訳ですね 名前は gruntfile です そして保存しましょう 各内容は先ほど確認した通りですけれども 先ず モジュールですね そして exports 複数です function ですね Grunt オブジェクトを引数に受けます そしてこの中に 先に プラグインの読み込みから やってしまいましょう grunt t が抜けていますね コピーしておきましょう そしてペーストと 読み込みは loadNpmTasks 複数形です ここも そしてこの括弧の中に文字列で 読み込むプラグインを指定します グラント ダッシュ コントリブ ダッシュの コンカトです そして 定義はこの タスクの定義ですね この前にやる事が多いんですが ショートカットでペーストさせて頂きます コマンドもしくはコントロール V ですね そして タスクの定義 こういうタスクをして下さい ということなのですが initConfigと configuration の 初期化という事ですね method の呼び出しですから 丸括弧そしてこの中に オブジェクトで中括弧二つです タスクを定義します そしてタスクの名前を付けます プラグインと合わせて concat にしましょう そして ここにまたオブジェクトで 内容を定義します そして distribution という意味なんですが list という事で また中括弧 大分入れ子構造になりますね この中に どのファイルをどこどこへという事で プロパティの定義をします 先ずどのファイルをという事ですね ソースです src そしてファイルは 複数あるのが通常でしょうから まとめるんですから 配列で複数のファイルを 文字列でパスの指定をします 今回は コンポーネンツ そしてその中のスクリプト 複数形になっていました そしてその中に三つファイルがありましたね ファイル名三つを書いていって この文字列のパスを カンマ区切りで配列をいれても勿論結構です でも今回はあの中に入っている JavaScript ファイル全部ですよね とういう場合には ワイドカード アステリスクが使えます 拡張子も何でも良い場合には アステリスク JavaScript ファイルしか入っていませんの でこれでも良いんですが JavaScript ですから js と指定した方が安心だと思います そしてこの後に続けてプロパティですから カンマ区切りで destination dest というプロパティです まとめるんですからこちらは一個です それを文字列で builds の中の development ですね その js 今は jsonfile しかありませんでした 名前を書きます ここはちゃんと名前を書かないとダメですね script と js と打ちます これで保存します タスクの名前は concat としました これは覚えておかないと Grunt の実行の時に使います Grunt のコマンドは コマンドラインツールから入力しますので ターミナルを開きました そして gruntfile.js を 保存したホルダにフォルダに change directory で切り替えます gruntworkflows ですね 切り替えができましたので 実行は非常に簡単です grunt そして名前覚えていますね concat を実行して下さい という事でエンターキーを押します 終わりました エラーありませんと言いますので 大丈夫の様です 確認をしてみましょう gruntworkflows の オーダーを見ると確かに js のオーダーの中に script.js ができています そして 4KB ですね 3KB 1KB と 300KB 弱ですから この大きさに まとまったという事が確認できます このレッスンでは Grunt のプラグインを使って 複数のファイルを一つにまとめてみました その場合には gruntfile.js に その定義をする訳ですが method は module.exports そこに function で定義し 読み込みは Grunt に対して loadNpmTasks 今回は contrib-concat を使いました そして unitConfig という中でタスクの内容を指定します 今回は list という中でソースと それから出力先ですね パスを指定してファイルを 一つにまとめたという事です

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

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

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

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

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

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