gulpのファイル構成やgulpfile.jsを公開。bloggulpのファイル構成やgulpfile.jsを公開。blogメディア運営や請負ウェブ制作などを通して得た経験や情報をその場で消費せずアウトプットするための場としてのブログ。未分類gulpのファイル構成やgulpfile.jsを公開。この記事は書いてから1年以上経過しました。FacebookシェアFbTwitterTwGoogle+G+HatenaHaPocketPkLINELIgulp初心者だった自分が試行錯誤を重ね、遅咲きながら現段階個人的に最強のgulpfile.jsが完成したので、晒します。自分のようなgulp導入初期の方の参考になればと思います。gulpのファイル構成まずはファイル構成ですが、以下のようになっています。.csscomb.jsonこちら、構成としてはresourceフォルダがいわゆる作業用ファイル群で、public_htmlがgulpで出力した納品用ファイルとなります。当然ですがpublic_htmlはほぼ触りません。resourceフォルダとpublic_htmlフォルダの中身って、ほぼ一緒になります。以前は同一フォルダにgulp.destしてたんですが、sassフォルダが邪魔だったんです。作業用と納品用で分けることでsassフォルダは除外し、完璧にクリーンな状態で納品ファイルを用意しつつ作業することができます。このほうが精神衛生上よかった。それだけの理由ですが、多分今後色々カスタムする上でも分けてしまった方が間違いないかと思います。package.jsonpackage.jsonにはプロジェクト名やら作者名やらが色々かけます。WordPressで言うところのテーマのstyle.cssみたいなもんです。大事なのはdevDependenciesで、プラグイン(とそのバージョン)の情報です。ここにあるプラグインがスパッとローカルにインストールされます。ちなみに個別インストール時の「--save-dev」ですが、これつけるとpackage.jsonに勝手に書き込んでくれるので自分の中で必須です。個別にアンインストール時も同じですね。--save-devgulpfile.jsgulpfile.jsの基本構成は以下になります。各細かい内容はなるべくコメントで書きました。gulp-plumberを咬ますとエラー時にgulpが止まらない。autoprefixerかけて、(対応ブラウザ。resource側cssフォルダに吐き出す。browser-syncで反映させる。jQueryなどの、すでに.minなjsは除外する。gulp-plumberを咬ますとエラー時にgulpが止まらない(cssみたいにgulp-notify書いてもエラー通知が何故か出ないのでそのまま)。変更されたjsのみをgulp.dest対象にする。uglifyでjsを圧縮するがライセンス表記を残す。jsもとりあえずresource側jsフォルダに吐き出す。browser-syncで反映させる。browser-syncで反映させる。['browser-sync','copyResource','sass','jsmin']を実行してからdefaultとして内容を実行。gulp-watchを使うとフォルダに追加したファイルも対象に監視してくれるのでgulp再実行の必要がない。css,sass,js以外に変更があったら実行。sassに変更があったら実行。cssを吐き出すので下のwatchが動く。cssに変更があったら実行。sassを変更したらセットで実行となる。jsに変更があったら実行。.minしたjsを吐き出すので下のwatchが動く。.min.jsに変更があったら実行。jsを変更したらセットで実行となる。});});.csscomb.json(gulp-csscombの設定ファイル)ここでちょっと話がずれますが、もともとcompassを使っていたことと、cssのminifyの種類が4つ(?)ほどあったので納品時便利かなとか思ったこともあって、gulp-ruby-sassを使おうとおもったことがありました。gulp-ruby-sassは、書式はググっても古いものの方が多いわコンパイル遅いわそもそもminifyの形がダサいわ見づらいわでイライラ。そこで、以前の同僚のN澤くんがかつて「cssを綺麗に整形できるんすよ〜」とか言っていたことを思い出し、半信半疑で使ったら信じられないくらいCSSが自分好みに出力できることがわかり、1日でgulp-ruby-sassを放棄。gulp-csscombが最高です。完全に圧縮したい時はgulp-cssminを使うと早いのでそちらをお勧めします。いうことで.csscomb.jsonの例です。完璧なジェネレータがあるのでそちらを使って、案件や自分好みにする方が良いと思います。押すだけで簡単なんで。あと個人的にcompassは、もう滅んだら良いと思っています。したら、全部タイムスタンプ更新される。これってなんとかならないのかなと。更新されたファイルのみ出力されるけど、数日間の作業の差分をまとめる時などは不便。Scriptによる「重複データの列まるごと削除」MovableTypeで非同期にアーカイブリストをページングウェブ制作請負事業を開始しました。システムに関するお問い合わせをお待ちしています。(1)株式会社p.c.c.フロントエンドの下請け・請負制作をはじめ、多数のウェブコンテンツを自社で企画・制作・運営している会社です。企業の外部ウェブ担当として顧問契約も行っています。