Autoprefixerでベンダープレフィックスを追加する。Autoprefixerでベンダープレフィックスを追加する。Autoprefixerによるベンダープレフィックスの付与を自動化してみたので、内容をまとめました。Node.jsをインストールGulpを利用するためにはNode.jsが必要なので、以下の公式サイトより最新版のインストーラーをダウンロードし、Node.jsをインストールします。Node.js公式サイトターミナルやコマンドプロンプトでプロジェクトのフォルダーまで移動するターミナル(Mac)やコマンドプロンプト(Windows)を利用して、Gulpをインストールして利用したいプロジェクトディレクトリまで移動します。/Users/....../Gulpをインストールしたいプロジェクトディレクトリプロジェクトのjsonファイルを作成ディレクトリの移動ができたらプロジェクトのjsonファイルを作成します。-yGulpのインストールプロジェクトディレクトリにGulpをインストールします。gulp※インストールしたGulpのファイルは、プロジェクトディレクトリの「node_modules」に内包されます。Sassファイルをコンパイルするgulp-sassをインストールSassファイルをコンパイルするのに利用するプラグイン「gulp-sass」をインストールします。gulp-sassCSS書き出しに利用するその他のプラグインをインストールそのままGulpでSassをコンパイルするとcharset指定が削除される問題があります。Sassのエラー時にgulpのタスクが毎回終了してしまうので、対策として「gulp-header」、「gulp-replace」、「gulp-plumber」の3つのプラグインも合わせてインストールします。gulp-plumberベンダープレフィックスを追加するgulp-autoprefixerをインストールCSSのベンダープレフィックスを追加するのに利用する「gulp-autoprefixer」をインストールします。gulp-autoprefixerautoprefixerの設定をプロジェクトのjsonファイルに追加autoprefixerのバージョンアップに伴ってこれまでgulp.jsファイルに設定を書いていたものが利用できなくなりました。以下のようなエラーが出る場合は、プロジェクトのjsonファイル(package.json)に追加する必要があります。https://twitter.com/browserslistpackage.jsonの末尾に追加します。8"]指定バリエーションはGitHubで確認できます。BrowserslistGulpを実行するためのgulpfile.jsを作成プロジェクトファイル直下に、Gulpを実行するために利用する「gulpfile.js」を作成します。4.0未満では書き方が異なります。※以前まではAutoprefixerのベンダープレフィックス対応範囲をgulp.jsに記載していましたが、バージョンアップに伴いjs側の記述は削除しpackage.jsonに追加するように変更しました。4.0未満の場合)※以前まではAutoprefixerのベンダープレフィックス対応範囲をgulp.jsに記載していましたが、バージョンアップに伴いjs側の記述は削除しpackage.jsonに追加するように変更しました。['watch']);プロジェクトディレクトリの構造イメージ上記のコードは以下のような環境での例になります。gulpfile.js(Gulpを実行するためのスクリプトファイル)プロジェクトの環境に合わせて「sassファイル参照ディレクトリ」および「cssファイル生成ディレクトリ」を変更してください。「生成するcssの設定」の箇所で生成するcssの設定を4種類(nested,compact,expanded,compressed)の中から変更できます。「compressed」に変更する事でCSSの圧縮が可能です。それぞれの出力結果は以下のページで確認できます。StylesAutoprefixerの対応範囲Autoprefixerでのベンダープレフィックス対応範囲は「ベンダープレフィックス対応範囲」で変更する事が可能です。設定方法については以下などが参考になると思います。Queries設定したGulpのタスクを実行するプロジェクトのフォルダーに移動した状態で「./node_modules/.bin/gulp」と入力しEnterを押す事でタスクを実行できます。./node_modules/.bin/gulpタスクを実行するとSassファイルが編集される毎に自動的に、指定したcssディレクトリにコンパイルされたCSSファイルが書き出されるようになります。7.0.0でエラーが出た場合タスクを実行しようとしたところ、gulp-autoprefixerで以下のようなエラーが発生しました。7.0.0)本エラーはnode.jsのバージョンが古いと発生するようです。(module.js:541:32)node.jsを更新するか、gulp-autoprefixerの7.0.0を一度アンイストールし、1つ前のバージョン6.1.0をインストールし直す事で解決しました。gulp-autoprefixergulp-autoprefixerの旧バージョンをインストール旧バージョンをインストールしたい場合は末尾に「@バージョン」を追加します。多くのサイトで紹介されている「gulp」コマンドは、以下のコードでグローバルにもGulpをインストールしておく必要があります。gulp-cli「gulp」コマンドの利用プロジェクトのフォルダーに移動した状態で「gulp」と入力しEnterを押す事でタスクを実行できます。Gulp【Gulp】タスクランナーGulpでCompassを利用してSassファイルをコンパイルし、Autoprefixerでベンダープレフィックスを追加する。【Gulp】タスクランナーGulpでCompassを利用し、Sassファイルをコンパイルする。