Coding

既存サイトコーディングで役に立つGulp

新規でサイトコーディングの依頼を受けると、自前のGulpセットをYeomanで作るわけですが、「既存サイトのここをこう直して」という依頼の場合、Yeoman先生に頼むわけにも行かず、保存とF5の生活に戻るわけですが、そうならないための簡単なGulpfileです。

gulpfile.coffee

gulp = require "gulp"
browserSync   = require("browser-sync").create()

# 監視対象
files      = ["**/*"]
gulp.task "connect", ->
	browserSync.init
		server:
			baseDir: "./sample"
			directory: false
		open: false
		port: 8080
		host: "localhost"
	return

gulp.task "watch", ->
	return gulp
		.watch(files)
		.on("change", browserSync.reload)
		
gulp.task "default", ["watch","connect"]

 

これだけでF5連打生活から脱出できます。

またPHPなどXAMPPとかApacheとかで既にローカルサーバーを立ち上げている場合は
browserSync.initのパラメーターとしてProxy設定をつければOK

gulpfile.coffee

...

gulp.task "connect", ->
	host = "localhost"
	browserSync.init
		open: false
		port: 8080
		reloadDelay: 200
		host: host
		proxy:
			target: "http://hogehoge.local.jp/" #<- これ
	return

...

Leave a Reply

最初のコメントを頂けますか?

更新通知を受け取る »
avatar
wpDiscuz