Gulp.jsの導入～Sassのコンパイルまで試してみた

Gulp.jsの導入からSassをコンパイルするまでを試してみたので、やったことをメモしておきます。

Node.jsのインストール

公式サイトにアクセスし、INSTALLをクリックしてインストーラをダウンロードします。
Node.js

インストーラを実行してNode.jsをインストールします。
Nextを選択。

チェックを入れてNextを選択。

インストール先を変更しない場合はそのままNextを選択。

よく分からないので設定は変更せずNextを選択。

Installを選択。

Node.jsのインストールが完了しました。

Windowsキーを押して「cmd」で検索し、コマンド プロンプトを起動します。

node -v

と入力してNode.jsがきちんとインストールされているか確認します。
Node.jsのバージョンが表示されればOKです。

　

Node.jsのバージョンが表示されない場合

バージョンが表示されれば問題ないのですが、今回やってみると以下のように表示されました。

色々調べてみると、環境変数を変更するといいみたいです。
コントロールパネル > システムとセキュリティ > システム > システムの詳細設定 > 詳細設定タブ > 環境変数を選択。

確認すると、パスの末尾に「\」が入っていました。
編集を選択して変更します。

変更してOKを選択。

コマンド プロンプトで再度

node -v

と入力すると、Node.jsのバージョンが表示されました。

　

package.jsonの作成

作業をするディレクトリを作成し、そのディレクトリへ移動します。
例えば、C:\test という作業ディレクトリを使用する場合、

cd C:\test

と入力します。

コマンド プロンプトで

npm init

と入力して、Node.js用のプロジェクトファイルを作成します。

nameやversionなどいろいろ聞かれますが、今回はとりあえず全部Enterで飛ばしました。
(後から変更できます。)

すべて入力すると、作業ディレクトリにpackage.jsonというファイルが作成されます。
ファイルの中身は先ほど設定したものになっていると思います。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

　

Gulp.jsのインストール

コマンド プロンプトで

npm install gulp -g

と入力してGulp.jsをインストールします。

インストール後、

gulp -v

と入力してバージョンを確認しておきます。

ローカルにもインストールしないといけないようなので、

npm install gulp@3.8.11 --save-dev

と入力してローカルにもインストールします。
(3.8.11のところは上記で確認したバージョンに変更してください。)

再度コマンド プロンプトで

gulp -v

と入力すると、ローカルにもインストールされていることが確認できます。

　

Sassのコンパイル

コマンド プロンプトで

npm install gulp-sass --save-dev

と入力してSassのプラグインをインストールします。

作業ディレクトリ内にsassとcssという名前でディレクトリを作成します。
sassディレクトリ内にstyle.scssファイルを作成し、中に適当にサンプルを記述。

#section {
	width: 960px;
	margin: 0 auto;
	h1 {
		font-size: 20px;
	}
}

作業ディレクトリにgulpfile.jsというファイルを作成し、以下を記述します。

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/*.scss')
	.pipe(sass())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'));
});

コマンド プロンプトで

gulp sass

と入力してタスクを実行します。

cssディレクトリ内にstyle.cssが作成されました。

#section {
  width: 960px;
  margin: 0 auto; }
  #section h1 {
    font-size: 20px; }

　

最初Gulp.jsをインストールしても、Node.jsと同じようにバージョンの確認がうまくできませんでした。
色々調べてみたのですが原因が分からず、環境変数の設定を変更したり作業ディレクトリを変更してやり直ししていたら動くようになりました。
結局原因が分からなかったので省略しましたが、自分用のメモとして残しておきます。

今回はとりあえず入れてみただけでGulp.jsの使い方はイマイチ分かっていませんが、今後仕事でも使うかもしれないので、徐々にでも覚えていきたいと思います。
　

【参考サイト】

• Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG
• 【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 ｜ Developers.IO
• タスクランナー「gulp」の導入手順（Windows）｜WEB Drawer
• WindowsのNode.jsインストーラでパスが正しく設定されない | WEBdev
• Windows 環境変数 Path の設定方法