Drawer|web制作に関するネタの引き出しサイトweb制作に関するネタの引き出しサイトTwitterFacebookRSS登録TOPページに戻るツール自分用のgruntタスクメモ自分用のgruntタスクメモ2014年06月02日ツール前にgruntの使い方を書きましたが、それからいろいろ試してみて自分なりのタスクを作成しました。使い倒してないのでまだまだ変更するところがあると思いますが、これを元に変えていきます。2種類用意しましたがっつり機能を使いたい時もあれば、ちょこっとだけ使えればいいかなっていうことが個人的にあったので2種類用意してみました。制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする制作フォルダにはscssファイルのみ置き、HTMLやJSは確認・納品フォルダにのみ置いておく1.がっつりタイプこちらは先程も書いたように、「制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする」ということをやります。使用gruntプラグインgrunt-contrib-watchgrunt-contrib-connectgrunt-contrib-copygrunt-contrib-cleangrunt-opengrunt-contrib-compassgrunt-contrib-uglifygrunt-contrib-cssmingrunt-csscombgrunt-autoprefixergrunt-contrib-concatフォルダ構成フォルダの構成はこのような感じです。制作フォルダ(resource)で制作と確認。実行するタスクは、watch(compass・csscomb・autoprefixer)とconnectです。出来たらCSSとJSを圧縮しつつ確認・納品フォルダ(deploy)へ必要ファイルをコピー。機能が保持されて圧縮されているか再度確認する必要があります。'\1\2\3\4')endendend2.ちょこっとタイプ上記のものだと結構処理が多くて、別にそこまでやる必要はないかなというもののためにもう一つ作りました。こちらはscssのファイルだけ製作用フォルダに置いておき、出力は確認・納品フォルダへ行います。ない気がしますが、ライブリロードとautoprefixerを使いたかったのと、何かgruntの機能で足したくなった時にいいかなと思ったからです。制作フォルダ(resource)にはscssファイルとそこで使うスプライト画像用のフォルダのみです。ファイルの移動はしなくて大丈夫です。'\1\2\3\4')endendendスプライト画像を確認・納品フォルダに生成したかったので、「generated_images_dir」を使ってるのがちょっと違う点でしょうか。タスクはどのような案件で制作環境かでだいぶ変わりそうな気がしますが、ひとつ参考になれば幸いです。参考ページこのタスクを作成する際に以下のサイトを参考にしました。Drawerこのサイトについてホームページ制作のマークアップエンジニアをしています。このブログはWebに関する記事を扱っています。自分で作ったものや試したもの調べたものを紹介しています。webdrawer.netページTOPへ戻る。