【Gulp】タスクランナーGulpでCompassを利用し、Sassファイルをコンパイルする。CMS2018.09.26【Gulp】タスクランナーGulpでCompassを利用し、Sassファイルをコンパイルする。タスクランナータスクランナーGulpでCompassを利用し、Sassファイルのコンパイルする方法をまとめました。Autoprefixerでベンダープレフィックスを追加する方法は以下を参考にしてください。Autoprefixerでベンダープレフィックスを追加する。インストールしておく必要があるため、未インストールの場合は以下の公式サイトより最新版のインストーラーをダウンロードし、Node.jsをインストールします。公式サイトターミナルやコマンドプロンプトでプロジェクトのフォルダまで移動するターミナル(Mac)やコマンドプロンプト(Windows)を利用して、Gulpをインストールして利用したいプロジェクトディレクトリまで移動します。/Users/....../Gulpをインストールしたいプロジェクトディレクトリプロジェクトのjsonファイルを作成ディレクトリの移動ができたらプロジェクトのjsonファイルを作成します。-yGulpのインストールプロジェクトディレクトリにGulpをインストールします。gulp※インストールしたGulpのファイルは、プロジェクトディレクトリに生成される「node_modules」内に内包されます。Sassファイルをコンパイルするgulp-compassをインストールSassファイルをコンパイルするのに利用するプラグイン「gulp-compass」をインストールします。gulp-compassCSS書き出しに利用するその他のプラグインをインストールその他書き出しに必要なプラグイン「gulp-header」、「gulp-replace」、「gulp-plumber」の3つのプラグインも合わせてインストールします。最後にプロジェクトファイル直下に、Gulpを実行するために利用する「gulpfile.js」を作成します。4.0未満では書き方が異なります。['watch']);config.rbファイルを作成Compassの利用に必須なconfig.rbファイルも作成します。config.rbファイルの中身プロジェクトに合わせて適宜調整してください。sassプロジェクトディレクトリの構造イメージ上記のコードは以下のような環境での例になります。gulpfile.js(Gulpを実行するためのスクリプトファイル)各ディレクトリの設定はプロジェクトの環境に合わせて適宜変更してください。設定したGulpのタスクを実行するプロジェクトのフォルダに移動した状態で「./node_modules/.bin/gulp」と入力しEnterを押す事でタスクを実行できます。多くのサイトで紹介されている「gulp」コマンドは、以下のコードでグローバルにもGulpをインストールしておく必要があります。gulp-cli「gulp」コマンドの利用プロジェクトのフォルダに移動した状態で「gulp」と入力しEnterを押す事でタスクを実行できます。Autoprefixerでベンダープレフィックスを追加する。Gulp【Gulp】タスクランナーGulpでCompassを利用してSassファイルをコンパイルし、Autoprefixerでベンダープレフィックスを追加する。Autoprefixerでベンダープレフィックスを追加する。