SassのコンパイルGulpでSassのコンパイルをしてみましょう。以下のSCSSファイルを作成します。}}GulpでSassをコンパイルできるようにするためにプラグインをインストールします。gulp-sassはnode-sassを利用しているのでRubyのSassとは機能が若干異なります。Compassを使う場合はgulp-rubysassを使いましょう。その場合は別途RubyとSassのインストールが必要です。インストールができたら、gulpfile.jsにSassをコンパイルするタスクを作っていきます。{});でタスクの登録をおこないます。gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定します。pipe(おこないたい処理)でsrcで取得したファイルに処理を施しますgulp.dest(“出力先”)で出力先に処理を施したファイルを出力します。.pipe(gulp.dest("./css"));ではこのタスクを実行してみましょう。以下のコマンドを実行します。sassするとCSSディレクトリにstyle.cssが生成されました。}これでGulpを使ってSassをコンパイルできました。CSSのベンダープレフィックス付与を自動化CSS3のプロパティの中には-webkit-のようなベンダープレフィックスをつける必要があるものが存在します。必要なくなったものもありますが、それを覚えるのは大変な労力です。そのため、たまにはこんな記述をしてしまいます。translate(10px,0);}確かに全てを記述すれば無難ですし、SassやCompassのmixinを使えば修正の手間もさほどかかりません。不要な記述が増えればCSSの容量も増えてしまいます。削ることができるものは削っていくようにしましょう。ベンダープレフィックス付与を自動化するためにgulp-autoprefixerを使います。https://www.npmjs.org/package/gulp-autoprefixer先ほど作ったstyle.scssを以下のように修正します。}}続いてgulpfile.jsにタスクを追加していきましょう。今回はpipeでautoprefixerを足すだけです。して簡単にタスクを追加していけるのがGulpの良いところです。.pipe(gulp.dest("./css"));});では、Sassタスクをもう1度実行してみましょう。sassさきほどのCSSが以下のようになりました。}ベンダープレフィックスが付与されていますね。useをもとにベンダープレフィックスの有無を調べて付与しています。オプションでブラウザやバージョンを指定することができるので、要件ごとにベンダープレフィックスの有無を変えることができ、柔軟性も高いのが特徴です。ベンダープレフィックスを意識しなくて済み、タイプも減ります。スタイルガイド生成CSSの保守性を高めるためにスタイルガイドを作りましょう。ジェネレータを使うことで、SassやCSSに記載されているコメントをもとにガイドを作成します。今回はFrontNoteという手前味噌なスタイルガイドジェネレータを使いますが、StyleDoccoやKSSなど使いやすいジェネレータを使うのが良いかと思います。・FrontNotehttp://frontainer.com/frontnote/・StyleDoccohttp://jacobrask.github.io/styledocco/・KSShttp://warpspire.com/kss/では早速入れてみます。installします。https://www.npmjs.org/package/gulp-frontnotegulpfile.jsにタスクを追加します。今回はSassに記載したコメントをもとにガイドを作成します。.pipe(gulp.dest("./css"));});続いてstyle.scssにガイド作成用のコメントを記載します。sass/style.scss/*#overviewGulp入門サンプルサンプルファイルです*//*#styleguideサンプル見出し1サンプルの見出しスタイルhoverすると青く2倍になる```<h1>見出し1</h1>```*/ではさっそく実行してみましょう。sassguideディレクトリができ、中にHTMLファイルのスタイルガイドが生成されました。しておけば半年後、1年後の自分や途中から参加したメンバーへの共有が簡単になります。次のページJavaScriptの圧縮を自動化します。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。