サイト制作に関するメモ書き

HOME > JavaScript > Gulp.jsの導入~Sassのコンパイルまで試してみた

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

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

Node.jsのインストール

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

try-using-gulp01

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

try-using-gulp02

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

try-using-gulp03

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

try-using-gulp04

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

try-using-gulp05

Installを選択。

try-using-gulp06

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

try-using-gulp07

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

node -v

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

try-using-gulp08

 

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

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

try-using-gulp09

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

try-using-gulp10

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

try-using-gulp11

変更してOKを選択。

try-using-gulp12

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

node -v

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

try-using-gulp08

 

package.jsonの作成

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

cd C:\test

と入力します。

try-using-gulp13

コマンド プロンプトで

npm init

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

try-using-gulp14

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

try-using-gulp15

すべて入力すると、作業ディレクトリに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をインストールします。

try-using-gulp16

インストール後、

gulp -v

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

try-using-gulp17

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

npm install gulp@3.8.11 --save-dev

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

try-using-gulp18

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

gulp -v

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

try-using-gulp19

 

Sassのコンパイル

コマンド プロンプトで

npm install gulp-sass --save-dev

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

try-using-gulp20

作業ディレクトリ内に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

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

try-using-gulp21

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

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

 

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

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

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP