前回の記事では、Macによるgulpの開発環境の構築について書きました。
記事の中で、gulpで実行させるタスクの例としてSCSSをコンパイルしてCSSにする方法を説明しましたが、今回はもう一歩だけ進んで、SCSSをコンパイルして出力されたCSSにさらに自動でベンダープレフィックスを付与してみたいと思います。
gulp
gulpの開発環境をMacで構築してみる
WEB関係の開発をしていると、HTMLやCSS・Javascriptを圧縮したり、SCSSをコンパイルしてCSSにしたり、CSSコードに必要なベンダープレフィックスを設定したりと様々なタスクを一つ一つ実行していく手間が出てきます。
そういったタスクを自動で実行してくれるのがタスクランナーというビルドツールです。
タスクが自動化できれば、処理のし忘れを防ぐこともできますし、何より煩雑なタスクを自分の手で実行する必要がなくなりますので、開発の工数短縮につながります。
ぜひ導入しておきましょう。
今回は、数あるビルドツールの中でも比較的人気の高い「gulp」の導入を解説していきたいと思います。
動作確認環境
- OS:OS X Yosemite 10.10.5
- node.js:v6.4.0
- npm:3.10.3