GulpでフルスタックJS開発環境構築！サーバサイドNode + Babel／フロントエンドReact + Sass

├─ dist
│  ├─ public
│  │  ├─ js
│  │  └─ css
│  └─ server
├─ src
│  ├─ frontend
│  │  ├─ js
│  │  └─ scss
│  └─ server
├─ tasks
└─ gulpfile.babel.js

start ─── parallel ─── parallel
          ├─ babel     ├─ watchFiles
          └─ front     └─ nodemon

$ npm install -D gulp @babel/core @babel/preset-env @babel/register

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": { "node": "current" }
      }
    ]
  ]
}

start ─── babel ─── parallel
                    ├─ watchFile
                    └─ nodemon

$ npm install -D gulp-babel gulp-nodemon

import gulp from 'gulp'
import gulpBabel from 'gulp-babel'

export function babel() {
  return gulp
    .src('src/server/**/*.js')
    .pipe(
      gulpBabel({
        presets: ['@babel/env'],
      })
    )
    .pipe(gulp.dest('dist/server'))
}

import gulpNodemon from 'gulp-nodemon'

export function nodemon(callback) {
  let started = false

  // 初回起動時および再起動時に実行される
  const onStart = () => {
    if (!started) {
      callback()
      started = true
    }
  }

  gulpNodemon({
    script: 'dist/server/index.js',
    watch: 'dist/server',
  }).on('start', onStart)
}

import { series, watch } from 'gulp'
import { babel } from './babel'

export function watchFiles(callback) {
  watch('src/server/**/*.js', babel)

  callback()
}

import { parallel, series } from 'gulp'
import { babel } from './tasks/babel'
import { nodemon } from './tasks/nodemon'
import { watchFiles } from './tasks/watch'

export const dev = series(
  babel,
  parallel(nodemon, watchFiles)
)

export const prod = babel

"scripts": {
  "dev": "gulp dev",
  "prod": "gulp prod"
}

$ npm install -S express

import express from 'express'

const app = express()

app.get('/hello', (req, res) => {
  res.json({ message: 'Hello from Node' })
})

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`)
})

$ npm run dev

$ npm install -D browser-sync laravel-mix webpack webpack-stream

let mix = require('laravel-mix')

mix
  .react('src/front/js/main.js', './dist/public/js')
  .sass('src/front/sass/app.scss', './dist/public/css')
  .copy('src/front/index.html', './dist/public/index.html')

import gulp from 'gulp'
import webpack from 'webpack'
import gulpWebpack from 'webpack-stream'

// Laravel Mix が提供するwebpack.config.jsを読み込む
// このファイルからユーザー定義のwebpack.mix.jsが参照される
const config = require('../node_modules/laravel-mix/setup/webpack.config.js')

export function front() {
  return gulp
    .src('src/front/**/*.(html|scss|js|jsx)')
    .pipe(
      gulpWebpack(config),
      webpack
    )
    .pipe(gulp.dest('.'))
}

import browserSync from 'browser-sync'

const server = browserSync.create()

export function reload(callback) {
  server.reload()
  callback()
}

export function serve() {
  const port = process.env.PORT || 3000

  server.init({
    proxy: `localhost:${port}`,
    port: 8001,
    open: false,
  })
}

import { series, watch } from 'gulp'
import { babel } from './babel'
import { front } from './front' // ★ 追加
import { reload } from './browser-sync' // ★ 追加

export function watchFiles(callback) {
  watch('src/server/**/*.js', babel)
  watch('src/front/**/*.*', series(front, reload)) // ★ 追加

  callback()
}

import gulpNodemon from 'gulp-nodemon'
import { serve } from './browser-sync' // ★ 追加

export function nodemon(callback) {
  let started = false

  // 初回起動時および再起動時に実行される
  const onStart = () => {
    if (!started) {
      callback()
      serve() // ★ 追加
      started = true
    }
  }

  gulpNodemon({
    script: 'dist/server/index.js',
    watch: 'dist/server',
  }).on('start', onStart)
}

import { parallel, series } from 'gulp'
import { babel } from './tasks/babel'
import { front } from './tasks/front' // ★ 追加
import { nodemon } from './tasks/nodemon'
import { watchFiles } from './tasks/watch'

export const dev = series(
  parallel(babel, front), // ★ front 追加
  parallel(nodemon, watchFiles)
)

export const prod = parallel(babel, front) // ★ 変更

$ npm install -S react react-dom

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

import React from 'react'

export default class App extends React.Component {
  construct() {
    super()
    this.state = { message: '' }
  }

  async componentWillMount() {
    const json = await fetch('/hello').then(res => res.json())
    this.setState({ message: json.message })
  }

  render() {
    return <h1>{this.state.message}</h1>
  }
}

$title-color: #FF6F61;

h1 {
  color: $title-color;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Gulp sample</title>
    <link rel="stylesheet" href="/css/app.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/main.js"></script>
  </body>
</html>

import express from 'express'
import path from 'path' // ★ 追加

const app = express()

app.use(express.static(path.join(__dirname, '../public'))) // ★ 追加

/* 以下略 */

$ npm run dev