コーディング

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

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

gulpfile.js

gulp = require('gulp')
browserSync   = require("browser-sync").create()
// # 監視対象
files = ["./src/**/*"]
gulp.task("connect", ()=>{
  return browserSync.init({
    open: false,
    host: "localhost",
    server:{
      baseDir: "./src",
      directory: false,
      port: 8080,
    }
  })
})
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", ()=>{
  return browserSync.init({
    open: false,
    host: "localhost",
    proxy:{
      target: "http://hogehoge.local.jp/" #<- これ
    }
  })
})

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

...

コーディング代行

高品質なソースコードをお約束いたします。

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ