おさらいシリーズ第3弾w 今やWEBアプリケーションのフロントエンド開発では手放せなくなってきたタスクランナー(gulp)とパッケージマネージャ(bower)だが、なにげに設定が煩雑で、どんなプロジェクトにも汎用的に使えそうな基本セット的なものが見つけられなかった。それなら──と、仕組みのおさらいをしながら、自分用のプロジェクトのテンプレートとして汎用的なセットを作ってみた次第。 今回作ったプロジェクトテンプレートでの各アセットの流れを図にしてみると、下図のようになる。 簡単に言えば、 bower で必要なアセットを外部からインストールして、それらとプロジェクト独自のスタイルやスクリプトを gulp を使って結合・最適化、最終的な公開用フォルダに配置するという流れだ。 ちなみに、今回作ったプロジェクトテンプレートはこちらからダウンロードできる。 プロジェクトテンプレートの環境 さーて、まず
![gulpとbowerによるプロジェクト作成のおさらい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/552e16b72a6d8945fd4d82177fe43cb306bcc9ce/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Z3VscCVFMyU4MSVBOGJvd2VyJUUzJTgxJUFCJUUzJTgyJTg4JUUzJTgyJThCJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUI4JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJUFFJUUzJTgxJThBJUUzJTgxJTk1JUUzJTgyJTg5JUUzJTgxJTg0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iNjE1YTAwODc0ODI1NTk4M2NhMTkyYmEzNzU3N2EyYg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2EyMTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPThkOWQ3NTA2ZjJmYzkwZTViMjE2NTRkMjg5M2IxNTEz%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0b69953c4d3038a228b57fd086329cb8)