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

オプションを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ファイルを連結するタスクにオプションを加えます。
講師:
04:50

字幕

このレッスンでは Grunt のプラグインを使って 実行しているタスクに オプションを加えてみたいと思います 使っているプラグインは contrib-concat というファイルを連結するプラグインです このプラグインによって ソースにある ファイルが三つあるんですけれども JavaScript のファイルを このパスに 一つの script.js というファイルに まとめてみます 既に一回実行してあるので この出来上がった script.js 開いているんですけれども まだ小さいファイルだから 良いといえば良いんですが 三つの切れ目がどこか分からないですね この切れ目に コメントを入れたいと思います コメントでここが切れ目だよという 記号を入れたいと思います Grunt のサイトで contrib-concat のプラグインについて 解説を見ておきましょう plugins そして 比較的上の方にありますので これですね こちらのページに説明が載っています options というのがありますが separator というのが区切りになります それから先頭に入れたいという文字です やはり文字が入れられるんですが それは banner という名前で 別になっています separator の方は ファイルとファイルの間ですね 一緒にした場合の間に入れる 区切りと banner は 先頭という事になりますので メッセージ等を入れる事もできるでしょう では gruntfile.js の定義のファイル JavaScript ファイルに このオプションを加えましょう このリストの前に入れておくことにします options でしたね そして これは object で指定します プロパティーが dist 一つ 増えましたので 区切りはカンマという事になりますが この中に 先ず separator ですね separation ではなくて separator でした こうですね そして文字列で 入れます コピーして使いましょうか コピーしてペーストの方はショートカットで やらせて頂きたいと思います 後一個 二個 三個 四個 五個ぐらい そして ちょっと面倒なので banner の方も 同じものを使ってしまいます 後これは改行が入れたかったら 改行の区切りを 改行のエスケープ文字を 入れないといけません じゃあ二回改行を先頭に入れておいて n ですね 二回改行を入れて コメントにしますのでダブルスラッシュを 入れておく必要がありますね そして後に一回区切りを 改行を入れます これをそのままコピーして ペーストはショートカットで やらせて頂きます 二つプロパティが入りましたので カンマ区切りが必要です separator を banner に直しましょう という事で保存をします ファイルを保存です Grunt のタスクは コマンドラインツールから入力します まず実行するフォルダですけれども 切り替えないといけません チェンジディレクトリで gruntworkflows と 切り替わりましたので タイプミスをした様ですね cd の grunt r が抜けたんですか flows と 今度は大丈夫ですね コマンドは grunt そして タスクの名前は concat にしましたので concat と エンターです 終わりました エラーは無し という事ですので 確認をしてみましょう 連結した script.js も開いているので 警告が出ています 書き換えされましたという事ですので 確認します はい ですね そしてこちら側です 先頭に separator が入って 先頭は banner ですね banner が入って 途中に separator が入っていますので 三つの JavaScript ファイルが どこで切れるかという事が分かりますね このレッスンでは プラグイン contrib-concat の オプションとして 正にプロパティが オプションなんですけれども 先頭の区切りの文字と それからファイルの間の区切り文字 というのを加えてみました

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

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

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

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

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

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