ラック
Home > ブログ > 記事 > 2016年6月 > gulpにBrowserSyncをちょい足し

gulpにBrowserSyncをちょい足し

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

先日、WordPressもくもく勉強会に参加しました。

勉強会自体はわりとまったりと環境の設定やら調整やら、あとはお話したり。

一緒に参加した方々を気にしつつ、訊いてみたいことは一通り聞くことができたので良かったと思います。

そこで聞いたことを吸収して、フィードバックできれば良いと思います。

その分も相俟ってちょっと場を賑やかにしてしまった感があり、そこは申し訳なくも思いましたが…。

 

個人的には5月頭に一度頓挫したgulpからBrowserSyncを動かすという目標を、勉強会の最中にアドバイスを受けつつ再挑戦しました。

結果的にその場では達成することができなかったのですが、一夜明けて再びトライし、動かすことに成功しました。

参考にさせて頂いたのは上記の記事など。

phpファイルの場合はnode.jsのサーバでは対応できないので、XAMPPなどのphpを動かす環境を動作させて、そこにBrowserSyncをプロキシとしてかませることで対応させることになる、などネットワークの知識もある程度ないと難しいところもありますが、なんとか。

うーん、本当に「開発環境を作る」だけでもネットワークエンジニアとしての知識が多少必要になるのだなぁ、と改めて痛感。

そもそもとしてgulpfile.jsもプログラムとかjsonのことを知ってないと設定すら難しいですし…いやはや、世間の方々はよくこれだけのものを組み合わせて色々使うことができるものですね…。

 

gulpfile.js


var gulp = require("gulp");

var sass = require('gulp-ruby-sass'); //sass
var plumber = require('gulp-plumber'); //待機
var notify = require('gulp-notify'); //標準出力
var connect = require('gulp-connect-php'); //proxy(phpファイル更新時リロード用)
var browserSync = require('browser-sync'); //ブラウザリロード

//scssコンパイルタスク
gulp.task("sass", function() {
	var errorMessage = "Error: <%= error.message %>";
	var sassOptions = {
		style : 'expanded'
	}

	return sass(["./scss/index.scss"], sassOptions) //★★★配列に突っ込めば複数可
	.pipe(plumber({
		errorHandler: notify.onError( errorMessage )
	}))
	.pipe(gulp.dest("./css/"));
});

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

//proxy経由
gulp.task('connect-sync', function() {
	connect.server({
		port:8001,
		base:'./',
		bin: 'C:/xampp/php/php.exe',
		ini: 'C:/xampp/php/php.ini' //★★★環境により要ファイルパス変更。Windowsの場合はこれがないと上手く動かないらしい
	}, function (){
		browserSync({
			proxy: 'localhost:8001'
		});
	});
});

//リロード
gulp.task('reload', function(){
	browserSync.reload();
});

//gulpのみでsass-watchとconnect-syncを動かす
gulp.task('default', ['sass-watch', 'connect-sync'], function() {
	gulp.watch("./**/*.html",["reload"]); //★★★ファイル種類によって足し引き
	gulp.watch("./**/*.php",["reload"]);
	gulp.watch("./**/css/*.css",["reload"]);
	gulp.watch("./**/css/*.js",["reload"]);
});

ということでこんな感じになりました。

WordPressのように編集するファイルの設置場所(テーマの置き場所)とアクセスする場所(WPの設置場所)が異なる場合上手く動くのか?とか疑問はあるものの、それは追々試してみたいと思います。

一先ずこれで


npm install gulp -g
npm init
npm install gulp gulp-ruby-sass gulp-plumber gulp-notify gulp-connect-php browser-sync --save-dev

してgulpfile.jsを置いて「gulp」と叩けば、htmlやscssを編集して上書き保存した瞬間に

  1. scssからcssへコンパイル
  2. ブラウザのリロード

を自動的にやってくれて、自分は上書き保存した後はブラウザのタブを見直すだけで編集結果の状態を確認できるという環境になれたわけです。

これでますます捗りますね!

 

ただ、coffeescriptは習得していないのでそこら辺りはどうしましょうかねぇ…。

やるならばtypescriptかなぁ、とは思うのですが。

minifyするだけならばgulpにやらせれば良いわけなので、手を付けるかどうか。

タグ: css, イベント, 手順, Sass(Scss), Brackets

 



関連する記事一覧