Sass」と「Node.js(npm)」、「bower」、「gulp」を用いて開発環境を構築するためのテンプレートを作成していきたいと思います。単純に「Sass」の導入だけでも十分に便利になることは間違いありませんが、もう少し踏み込んで「gulp」の導入まで進めておくと、ベンダープレフィックスの付与やファイルの圧縮・ミニファイなどまで自動で完了させることができるので、この機会にまとめて導入を考えてみてはよいのではないでしょうか。Sass」が始められるような環境を構築、また「gulp」の「タスク」などもあわせて公開し、細かいところはともかくとして「とりあえずサイトを便利に製作できる」という地点にまでご案内し、その便利さを実感できれば良いと考えています。コマンドプロンプトを多用することにはなりますが、毛嫌いせずに覚えておくときっと便利になるはずです。まとめはじめにWebサイトの構築にCSSフレームワーク「Bootstrap」を利用している方は多いことでしょう。簡単に構築できる反面で、標準のまま利用するといかにも「Bootstrap」というようなデザインのサイトが出来上がり、慣れてくると少しずつカスタマイズをしていきたくなります。カスタマイズのためにはHTMLに新たなクラスやIDを与えたりしてプロパティを上書きしていく方法もありますが、「Bootstrap」では色やフォント、サイズに関する設定など細部にわたるカスタマイズを行った上で、その設定を反映したCSSをダウンロードできる機能が備えられています。download:Bootstrapとはいえ、微調整が必要な部分のために都度設定項目を入力して新たにダウンロードするのは現実的ではありませんし、色やサイズなどといった既に定義されている基本的なプロパティを上書きするためだけのCSSを記述するのもなんだか癪に障ります。Sass」を利用することで、サイトの仕様に合わせた「Bootstrap」を構築することが可能です。Stylesheets)では、変数が使用出来たりセレクタを入れ子に出来たりすることでCSSの記述がより簡潔に、効率良く進めることができるもので、今やWeb製作になくてはならないもののひとつといっても過言ではないでしょう。Sass」を使用するためには、「Ruby」や「Compass」、「Bower」、「npm」など新たなツールや覚えなければいけないことがたくさんあることに気づかされます。Sass」を使いたいという人のために、手順を記していきたいと思います。あわせて「gulp」を導入することでベンダープレフィックスの付与、ファイルの圧縮・ミニファイといった作業を一任させることができ、手間を大きく減らすことができるようになるでしょう。必要なもの必要となるプログラムなどについて、簡易な説明をしておきます。(http://gulpjs.com/)Node.js「サーバサイドのJavaScript環境」です。Manager)を使ってライブラリのインストールなどを管理することができ、「npm」はインストール対象のライブラリに必要な別のライブラリもまとめてインストールしてくれる優れものです。「Node.js」は公式サイト(http://nodejs.org/)に、WindowsとMacにはインストーラが用意され、Linux用にはソースコードが提供されています。Files\nodejs\node.exe」、Macは「/usr/local/bin/node」に実行ファイルがインストールされることになります。今回は「npm」を利用するために、「Node.js」をインストールします。windows「git」は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムで、「GitHub」など利用されたことのある人もいるでしょう。今回は「bower」を利用するために、「git」をインストールします。bower「bower」はTwitterがつくった、JavaScriptやCSS、HTMLなどについて依存関係も含めて管理してくれる、フロントエンド用パッケージ管理ツールとなります。有名なJavaScriptのライブラリ「jQuery」なども、「bower」で提供されています。「npm」がサーバサイドのパッケージ管理ツールとして開発環境系の管理であるならば、「bower」はクライアントサイドのパッケージ管理ツールとしてブラウザで動くライブラリを管理するものであるとも言えますが、たとえば「jQuery」などのように「npm」、「bower」どちらにも提供されているものも存在しています。Sass」も「npm」、「bower」どちらでも提供されており、「bower」がなくても目的は達成するのですが、今後の汎用性も考えて「bower」を利用することにします。gulp「gulp」は「タスクランナー」に分類されるツールで、たとえばSassのコンパイル、CSSのベンダープレフィックスを自動的に付与する、JavaScriptやCSS、HTMLの圧縮・ミニファイなど各種の「タスク」を自動的に行えるようになるほか、ソースファイルを監視して変更があれば自動的にブラウザをリロードするなどWeb製作を効率化させるために必須ともいえるものです。「gulp」がなくてもWeb製作を進めることは可能ですが、決まりきった作業は自動化していくことが効率化を進める一番の要因ですので、「gulp」をぜひ導入してみましょう。Support)を選択し、ダウンロードします。Group(https://github.com/nodejs/LTS/)の通りですが、個人のみで使用する場合はどちらを選んでも良いでしょう。企業などチームで開発する場合は、「LTS」を選んでおくのが無難です。インストールプログラムの実行ダウンロードした「node-v4.2.3-x64.msi」(ファイル名はバージョン、環境により異なります)を実行し、「Next」をクリックする。Agreement」にチェックを入れ、「Next」をクリックする。インストールする場所は必要があれば変更し、「Next」をクリックする。インストールするものは変更せず、「Next」をクリックする。「Install」をクリックする。「Finish」をクリックする。-v」とそれぞれ入力し、バージョン番号が表示されていれば正常に完了です。Windows」をクリックし、ダウンロードします。インストールプログラムの実行ダウンロードした「Git-2.6.4-64-bit.exe」(ファイル名はバージョン、環境により異なります)を実行し、「Next」をクリックする。ライセンスを読み、「Next」をクリックする。インストールする場所を必要があれば変更し、「Next」をクリックする。インストールするものは変更せず、「Next」をクリックする。スタートメニューへの登録も必要あれば変更し、「Next」をクリックする。Prompt」を選択し、「Next」をクリックする。endings」を選択し、「Next」をクリックする。window」を選択し、「Next」をクリックする。そのまま「Next」をクリックする。「Finish」をクリックする。–version」と入力し、バージョン番号が表示されていれば正常に完了です。インストール「bower」のインストールは「npm」から行うことになります。bower」と入力すると、「bower」がインストールされます。標準では「C:\Users\ユーザ名\AppData\Roaming\npm」にインストールされる。-v」と入力し、バージョン番号が表示されていれば正常に完了です。「npm」、「git」、「bower」のインストールにより、Web開発環境構築の下準備が整いました。ここからはWeb用のHTMLやCSSなどソースファイルや、「gulp」など各種ライブラリを保存するフォルダを作成し、そのフォルダをひとつのプロジェクトフォルダとして使用していくことになります。作業用フォルダの作成まず、Web製作用のファイルをまとめて管理する「プロジェクト用フォルダ」を適当な場所に作成しましょう。今回は「D:\」ドライブ直下に「labo」というフォルダを作成しました。フォルダのパスやフォルダ名そのものに日本語が含まれていると、以下の作業がエラーとなる場合があります。日本語フォルダを作成しない、Windowsのユーザ名が日本語の場合のマイドキュメント以下には作成しないようにしてください。Sass」の各種ファイルを取得し、すぐにでも使えるようにしたテンプレートを公開します。Sass」を使ってみたいという人は利用してみてください。後述しますが、「gulp」のタスクも含まれており、難しいことを考えずにJavaScriptやCSSの圧縮・ミニファイが行えるようにしています。38397f74c4ac792469b0916e1ea5ce0e]ファイルを保存後に圧縮ファイルを展開し、「gulp」「source」「bower.json」「gulpfile.js」「package.json」を先ほど作成した作業用フォルダ「D:\labo」に移動してください。install」と入力して実行します。複数のライブラリをダウンロードすることになるので少し時間を要します。install途中、「WARN」など警告やエラーが出る場合がありますが、ひとまず問題がなく進んでいきます。「D:\labo」に「node_modules」というフォルダが作成され、「gulp」など様々なライブラリがインストールされています。install」と入力して実行します。install「bower_components」というフォルダが作成され、「jquery」「bootstrap-sass」がインストールされています。ここまでの作業でひととおりの準備が整いました。help」と入力し実行すると、よく使う「gulp」のタスクが確認できるようにしています。○○○」という形で利用するようになっています。「sample」というタスクを実行すると、「bootstrap」のテンプレートが表示できるようにしています。sample」を実行してみましょう。すると、「D:\labo」に「public」というフォルダが作成されているので、フォルダ内にある「index.html」をブラウザで開いてみましょう。example」が表示されていれば成功です。「gulp」の「sample」というタスクで何が行われたかを見てみましょう。「sample」タスクは「gulp」ディレクトリの中にある「task」フォルダの「sample.js」に記載されています。「task」ディレクトリを見るとわかるように、「gulp」から呼び出せるタスクをそのままファイル名としておくと、今後の管理も便利になるでしょう。);});「gulp」のタスクは「gulp.task」以下に記述するようになっています。「sample」タスクは、「runSequence」というタスクを指定した順番に実行できるモジュールを使い、まず「bootstrap」というタスクと「clean」を実行した後に、「build」というタスクを実行するという形になっています。「bootstrap」というタスクは「bootstrap.js」に、「clean」というタスクは「clean.js」に、そして「build」というタスクについては「gulpfile.js」にタスクの内容が記載されています。.pipe(gulp.dest(config.font.dst)));});「bootstrap」タスクは、「bower」で取得した「bootstrap」の関連ファイルから「_variables.scss」を取得し、「_variables-sample.scss」と名前を変更したうえで「source」ディレクトリ内へとコピーしています。config.projectPath.styleguide.root]));次に「clean」タスクは、「public」「styleguide」ディレクトリと、「build」タスクによって作成されるディレクトリを削除しています。これは、一度出力先を綺麗にしたうえで新しくファイルを出力する処理ということになります。'www']);そして「build」は作成したソースファイルを公開するファイルの形式へと変換するタスクですが、よく使用するものなので個別のファイルにせず「gulpfile.js」という大元に記載しています。「build」タスクでは「sass」「webpack」「www」というタスクを処理していることがわかります。.pipe(browserSync.stream());});「sass」タスクは、ソースマップの出力、スタイルガイドの出力に加え、ベンダープレフィックスの付与やファイルの圧縮・ミニファイの処理が行えるようになっています。開発中はCSSを圧縮・ミニファイされてしまうと確認作業が手間取る、またリリース(公開用ファイル生成)時にはソースマップが不要となるなど、状況により要・不要のものが異なります。それに合わせ、通常時は圧縮を行わずソースマップを出力し、「release」というタスクによって呼び出される際にのみ圧縮処理を行い、ソースマップを出力しないと切り替えています。.pipe(browserSync.stream());});「webpack」タスクは、「Bootstrap」のJavaScriptファイルや、自身で作成したJavaScriptファイルをひとつに結合しています。「sass」タスク同様にファイルの圧縮・ミニファイの処理は切り替えられるようになっています。.pipe(browserSync.stream());});「www」タスクは、「source」ディレクトリの内容をそのまま「public」へとコピーします。このような処理の流れで「sample」タスクは動いていますが、「sass」など他のプロジェクトでも流用できるものがほとんどで、ディレクトリ構成や名前などは都度対応できるように「config.js」というファイルにまとめて記載してあります。「gulp」用設定ファイル「gulp」フォルダにある「config.js」には、プロジェクトのフォルダ構成など各種設定が記載されているおり、フォルダ名などは必要に応じて変更してください。false;「product」を「true」にするとCSSとJavaScriptの圧縮・ミニファイが有効になり、CSSとJavaScriptのソースマップを「出力しない」設定となります。'./public/';「projectName」は作成するプロジェクトの名前です。最終的に出力されるCSSやJavaScriptファイルの基礎名として使用しています。「sourceDir」はHTMLやCSS、JavaScriptファイルなど、実際に編集していくソースファイルを置くフォルダです。「publicDir」は公開用となるHTMLやCSS、JavaScriptファイルが「build」タスクにより出力されるフォルダです。今回の「gulp」タスクには、「ソースファイルを編集するとブラウザを自動更新する」という非常に便利な機能を含めています。start」とだけ入力して実行してみましょう。すると、「デフォルトタスク」が動作しローカルのWebサーバが起動するようになっており、ファイルを更新すると自動でブラウザがリロードされ、毎回更新ボタンや「F5」を押す手間が省けるようになります。start」と入力し実行すると自動的にブラウザが起動し、作成したサイトが表示されているかと思います。「http://192.168.56.1:3000」をコピーし、ブラウザで開いてみてください(※URLは環境により異なります、画面のURLを確認してください。)この状態のまま、「source」ディレクトリにある「www」ディレクトリの「index.html」を変更してみましょう。example</h1>」と変更し、保存してみてください。example」と変わったことが確認できるでしょう。更新されていない場合は一度手動でブラウザを更新し、改めて「index.html」を変更し、保存してみると次回以降は自動で更新することが確認できるでしょう。他にも、「source」の「scss」ディレクトリにある「_variables-sample.scss」を変更してみたり、「script」にある「bootstrap3.js」を変更してみると、その変更がブラウザにもすぐ反映されていることがわかるかと思います。同時に複数のブラウザの挙動を確認できるブラウザの自動更新は「browsersync」というモジュールを利用しているのですが、「browsersync」では同時に複数のブラウザをリロードし、ボタンのクリックやスクロールを同期することが可能です。Edge」を開いています。URL「http://192.168.56.1:3000」(例)を開いてみると、その動きが確認できることでしょう。スマートフォンが同じネットワーク内に接続されているのであればスマートフォンからでも同様の動作が可能です。これにより異なるブラウザ、端末のチェックなども手早く行えることでしょう。ジョブを終了しますか(Y/N)?」と尋ねられるので「Y」と入力し、終了することができます。start」を実行してください。Sass」を利用するために、「Node.js(npm)」「bower」「gulp」など必要なプログラムのインストールから、「gulp」のタスクを実行しベンダープレフィックスの付与やファイルの圧縮・ミニファイまで行い、閲覧できるHTMLサイトのテンプレートを作成しました。「SASS」や「gulp」が便利である、ということはよく耳にしても、いざ自分が導入してみようとなると決してハードルが低いとは言えません。様々なことを理解してから使用するのが一番ではありますが、まずは動く状態のものを利用し、その上で必要な部分を補足するような形で学習していくほうがわかり易いこともあるのではないでしょうか。公開したテンプレートをもとに、必要な部分を補足学習し、Webサイトの製作に活かしていければなによりです。記事は見つかりませんでした。コメントをキャンセルメールアドレスが公開されることはありません。