ラック
Home > ブログ > 記事 > 2016年5月 > gulp導入

gulp導入

カテゴリ: ホームページ, 開発環境

ついに手を伸ばす時がきたか…。

node.jsは前にgruntを入れようとして挫折したときに導入済みなので、gulpだけ入れてみます。コマンドは以下のような感じで。必要そうなプラグインも一緒に入れてしまいます。

コマンド


> npm install gulp -g
' インストール
> cd .\myproject\
' プロジェクトのディレクトリに移動
> npm init
' (とりあえず全てエンターでok)
> npm install gulp --save-dev
' プロジェクトディレクトリでインストール、pakage.jsonに記録
' ここでgulpfile.js(詳しくは下記)を作成
> npm install gulp-ruby-sass --save-dev
' sassコンパイルできるようにruby-sassをインストール[1][2]
' 以下、あると良さそうなものをインストール
> npm install gulp-plumber --save-dev
> npm install gulp-notify --save-dev

gulpfile.js


var gulp = require("gulp");

var sass      = require('gulp-ruby-sass');
var plumber = require('gulp-plumber'); //エラーあっても止まらないように
var notify = require('gulp-notify'); //ログ出力用

//sassコンパイル
gulp.task("sass", function() {
	var errorMessage = "Error: <%= error.message %>";
	var sassOptions = {
		style : 'expanded'
	}
//	return sass("scss/index.scss", sassOptions) //単体だと通るとかそんな感じっぽい
	return sass(["scss/index.scss", "scss/index2.scss"], sassOptions) //配列に突っ込めば複数可
	.pipe(plumber({
		errorHandler: notify.onError( errorMessage )
	}))
	.pipe(gulp.dest("css/"))
	/*.pipe(connect.reload())*/;
});

// watchタスク(Sassファイル変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
	var watcher = gulp.watch('./scss/**/*.scss', ['sass']); //scssディレクトリを見る
	watcher.on('change', function(event) {
		console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); //ログ出力
	});
});

//gulpのみだとsass-watchが動く
gulp.task('default', ['sass-watch']);

あちこち参考にしつつ1時間かかるかかからないかくらいでgulpfile.jsを上記のような設定に。

これで特定ディレクトリをウォッチして、変更があれば自動でscssをコンパイルするところまで行きました。

複数を一気にやる場合は配列として突っ込めば良いようですね。

あとは、ブラウザリロードも自動でやりたいですね…折角なので。jsファイル圧縮も。

 

  1. gulp-ruby-sassにはsassバージョン3.4以上が必要らしい
  2. gulp-sassを導入しても良いですが、試したらパーシャルを読み込まないでエラーになったので速攻で縁を切りました

 

gulpとは関係ないですが、開発環境に他のところから持ってきたindex.htmlやcssを違うフォルダに上書きしてしまって、元のindex.htmlやcssを失うということをやらかしました…。

もう終わっている環境だったので壊れてもダメージはないのですが、ちょっと悲しい…。

バックアップかバージョン管理も、導入したいなぁ…と備忘録代わりに書き留めておきます。

タグ: css, 手順, Sass(Scss), gulp

 



関連する記事一覧