CSS Nite LP39 フォローアップ（4）宇野 陽太さん（ピクセルグリッド）、坂巻 翔大郎さん（ピクセルグリッド）、小山田 晃浩さん（ピクセルグリッド）

2015年7月 6日（月）

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、宇野 陽太さん（ピクセルグリッド）、坂巻 翔大郎さん（ピクセルグリッド）、小山田 晃浩さん（ピクセルグリッド）の『ビルドツールはじめの一歩（タスクランナー編）』セッションのスライドなどをシェアします。

フォローアップ

Gruntとgulpについてのセッション、いかがでしたでしょうか？このセッションでお伝えしたかったのは、タスクランナーそのものもありますが、意外とコマンドラインで必要な操作は少ないということもお伝えしたい意図がありました。例えば、gulpのインストールまでに必要なのは、順に

```
node -v
npm install -g gulp
npm install
```

の計39文字です。これから導入したいと考えているかたはぜひ挑戦してみてください。インストール手順は動画にまとめていますので、以下の補足とあわせて参考にしてください。

「CSSNite LP 39 gulpのインストールから起動まで」

画面はMacですが、Windowsの場合はターミナルのかわりにコマンドプロンプトを使います。

テキストによる詳しい説明も用意しています。

## 補足

セッション中、インストールに関しての説明不足が一部ありました。

### Windowsのかたへ

Nodeのインストーラを使いインストールしたあと、「node -v」と打ち込んでもうまくnode.jsが動かないことがあります。その場合には、以下のページを参考に、調整をしてみてください

http://webdev.jp.net/windows-nodejs-path/

### Macのかたへ

Nodeのインストーラを使いインストールしたあと、「npm install -g gulp」でエラーになってしまうことがあります。この場合、管理者権限でコマンドを実行します。そのためには、コマンドの前に「sudo」（Super User Doの意味）を付けてください。

つまりこのようになります
```
npm install -g gulp
```
ではなく、以下とします。
```
sudo npm install -g gulp
```
(この後パスワードを聞かれます)

## 質問への回答

アンケートのコメント、全て読ませていただきました。貴重な、参考となるご意見ありがとうございます。
いくつかコメントで質問をいただだきましたのでお答えいたします。

### プレビューサーバにGrunt/gulp設定ファイルを同期するメリットは？

小山田：基本的に、GitではSassから吐出されたCSSファイルや、結合後のJSファイルは管理しないようにし、元ファイル（scssや結合前のJS）のみを管理していました。そのため、プレビュー環境でもビルドする必要があり、プレビューサーバにもGruntやgulpを動かしていました。

### Gruntを使っています。gulpに変える必要はありますか？

小山田：ありません。Gruntとgulpはマリオとルイージのような関係で、できることはだいたい同じです。ただし、gulpのほうが後発ということもあり、処理が効率的(並列で処理してくれる)、スマートな書き方、不要な中間ファイルを出さないようにできる、というGruntにはないメリットがすこしあります。
もし余裕があればgulpも試してみるといいでしょう。

### ピクセルグリッドさん的に、Middlemanのことはどう思いますか？

小山田：個人的にはMiddlemanは大きすぎると考えています。Grunt/gulpのような小回りが効きづらいと考えているので必要がなければ使わないと思います。

### Rubyのバージョン管理にも困っています

小山田：僕もそうなんです！主にSassのためかと思います。個人的に、最近は本家Sassではなく、Rubyに依存しない、libsassを使うのがいいかなと思い始めています。grunt-sass, gulp-sassは、libsassのラッパープラグインでRubyなし、node.jsにのみ依存して利用できるので、こうした、依存をできるだけ少なくする手段をとってみるといいと思います。

### 静的ファイルのみを納品している時に、クライアント側で更新される際のルール

坂巻：HTMLに関しては、量産のためのテンプレートでしたので、クライアント側で更新されることはありませんでした。CSS/JSに関しては変更したい場合は依頼をもらって、変更ファイルを渡しました。またJSファイルの中でもクライアント側で編集したいと言われて、結合対象から外したJSファイルがあり、そのファイルがクライアント側で変更された時は、変更後のファイルと何が差分なのかがわかるものををいただきました。（といっても僕はGitを使っているので差分はGitで出せるのですが）

SCSSに関してですが、クライアント側でCSSを調整したいといった要望がある場合は、SCSSから生成したCSSとは別に、クライアント側で自由に書けるCSSを用意しておくのが良いかと考えています。

```html
<!-- SCSSから生成したCSS -->
<link rel="stylesheet" href="/path/to/file.min.css">
<!-- クライアント側で変更をするためのCSS -->
<link rel="stylesheet" href="/path/to/style-client.css">
```

このように、SCSSから生成されたCSSと、クライアント側でそのCSSにないものを追加したり、上書きしたりするためのCSSを読み込むようにします。メリットはSCSSがわからなくても問題がないこと。デメリットはクライアント側で追記されたCSSによってモジュールが壊れたりする可能性があることでしょうか。

### Gruntを使ったプロジェクトではベンダープレフィクスについては含めなかったのでしょうか

坂巻：ベンダープレフィクスはCompassによって付与されています。これもまた開発開始時期の話になり、Autoprefixerのバージョン0.1が登場したのが2013年4月なのですが、ある程度安定したバージョン1.0が出たのは2013年の12月頃でした。その頃はAutoprefixerの知見が無かったため、Compassを使用していました。

### compassはもう過去のものなのですね（；；）

坂巻：いえ、Compassは使用しています。ベンダープレフィクスで使うこともありますが、`background-image`プロパティなどで使える、`image-url()`や、画像の幅を取得できる`image-width()`をよく使っています。[grunt-contrib-compass](https://github.com/gruntjs/grunt-contrib-compass)を使うことで、GruntからCompassを使うことができます。（Gruntとは別に、compassのインストールが必要です）

### プロジェクトのディレクトリ構造をどうしているか知りたいです

坂巻：大規模サイトのリニューアルといっても、古いコンテンツを残しつつ、新しいものも追加される形でした。なので、基本的にはそのプロジェクトのディレクトリ構成と同じように揃えてたり、いろいろ事情があってのディレクトリ構成なので、参考になるかはわからないのですが、以下の様な形です。

```
    project
    ├ .editorconfig
    ├ .gitignore
    ├ Gruntfile.js
    ├ config_siteA.rb
    ├ config_siteB.rb
    ├ Gemfile
    ├ Gruntfile.js
    ├ package.json
    ├ README.md
    ├ htdocs_siteA/
    │ ├ _template
    │ ├ _styleguide
    │ ├ _jsprototype
    │ └ common/
    │      ├ css/
    │      │ ├ style.css
    │      │ ├ font/
    │      │ │ └ fontawesome-webfont.woff
    │      │ └ src/
    │      │      ├ style.scss
    │      │      └ partial/
    │      │           ├ _setting.scss
    │      │           ├ _base.scss
    │      │           └ _project-header.scss
    │      ├ img/
    │      │ ├ misc/
    │      │ └ project-header/
    │      │      └ logo.png
    │      ├ include/
    │      │ └ project-header.txt
    │      └ js/
    │           ├ modernizr.custom.js
    │           ├ script.min.js
    │           ├ lib.js
    │           ├ src/
    │           │ └ project-header.js
    │           └ vendor/
    │                └ jquery.js
    └ htdocs_siteB/
    └ htdocs_siteAとほぼ同様
    ```

動画

CSS Nite LP39「ビルドツールはじめの一歩（タスクランナー編）」 from CSS Nite on Vimeo.

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。

2010年から2019年のベスト・セッション