質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

slimのincludeについて

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 164

bambi_ak

score 0

前提・実現したいこと

slimファイル内に別ファイルのslimをincludeさせたいのですが、原因不明のエラーに悩まされておりましてご存じの方がいらっしゃいましたら教えていただけますと幸いです。

gulp-slimを使用し、slimファイルから静的htmlファイルをビルドしてサイト制作を行っています。
各画面を構成する*.slimファイルと同階層にincludes/ディレクトリを用意し、内部に共通パーツのslimファイルを格納しそれぞれのslimファイルでincludeさせ使用したいと考えているのですが、エラーの原因がどこにあるのかググってみているのですが、分からず思案しております。

少し長くなってしまいますが、対象ファイルのコードとgulpとpackage.jsonも記載します。
数年ぶりにslimを書いて、驚くほどに書き方を忘れてしまっていてググりながら書いていたのですが、この問題に衝突してしまいましてご存知の方ご教授いただけますと幸いです。

何卒よろしくお願いいたします。

発生している問題・エラーメッセージ

[00:21:34] gulp-notify: [Error running Gulp] Slim error in file (/Users/akitsu_tatsuya/works/futurize/askChat/askchat_static/src/views/index.slim):
NoMethodError: undefined method `render' for #<Object:0x00007fe04b87af18>
  Use --trace for backtrace.

[00:21:35] gulp-notify: [Error running Gulp] no writecb in Transform class

該当のソースコード

■index.slim

doctype 5
html
  head
    = render 'head'
    title askChat
  body
    = render 'header'
    main
      .l-profile_container
        figure.m-profile_thumb
...

■header.slim

header.l-header
  .p-header_inner
    a.p-header_global_logo href="/"
...

■head.slim

  meta charset="utf-8"
  meta http-equiv="content-language" content="ja"
  meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"
  meta name="format-detection" content="telephone=no"
  meta http-equiv="X-UA-Compatible" content="ie=edge"
  meta name="description" content=""
  meta name="keywords" content=""

  / ogp
  meta property="og:title" content=""
  meta property="og:description" content=""
  meta property="og:site_name" content=""
  meta property="og:locale" content="ja_JP"
  meta property="og:url" content=""
  meta name="twitter:url" content=""
  meta property="og:image" content=""
  meta name="twitter:image:src" content=""
  meta name="author" content=""

  / ogp & twitter
  meta property="og:type" content="website"
  meta property="og:locale" content="ja_JP"
  meta property="fb:app_id" content=""
  meta name="twitter:card" content="summary_large_image"
  meta name="twitter:site" content=""
  meta name="twitter:creator" content=""
  meta name="twitter:domain" content=""
  meta property="og:site_name" content=""

  link href="./css/style.css" rel="stylesheet"

試したこと

何度かぐぐりつつ、=-に変更したり==にしてみたのですが、結果は変わらずでした。
またerbの書き方に寄せるべきなのかと思い(認識違いでしたらお恥ずかしいのですが)== render partial: 'header', locals: { @header: header }などと書いてみたりしたのですが、別のエラーが発生してしまい駄目でした。

補足情報(FW/ツールのバージョンなど)

該当箇所のgulpfile.jsとpackage.jsonも記載します。
バージョン問題はよくありそうなので、参考にご一読いただけますと幸いです。

■package.json

{
 ...
  "scripts": {
    "dev": "gulp",
    "build": "gulp build",
    "lint": "gulp lint",
    "dist": "run p lint build"
  },
  "devDependencies": {
  ...
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-slim": "^0.3.0",
    ...
  },
 ...
}

■gulpfile.js

const gulp = require('gulp')
const browserSync = require('browser-sync')
const slim = require('gulp-slim')
...
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
...
const OPTIONS = {
  ROOT_PATH: './public',
  SRC_PATH: './src',
  PUBLIC_PATH: './public',
  BUILD_PATH: './dist',
  ...
}

const browserSyncFunc = done => {
  browserSync.init({
    server: {
      baseDir: OPTIONS.ROOT_PATH
    },
    port: 3333,
    reloadOnRestart: true
  })
  done()
}

const slimFunc = () => {
  return gulp.src(`${OPTIONS.SRC_PATH}/views/*.slim`)
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(slim({
      require: 'slim/include',
      pretty: true,
      options: 'include_dirs=["./src/views/includes"]'
    }))
    .pipe(gulp.dest(OPTIONS.PUBLIC_PATH))
    .pipe(browserSync.stream())
}

const watchFunc = done => {
  gulp.watch([`${OPTIONS.SRC_PATH}/views/*.slim`], gulp.parallel(slimFunc))
  ...
  done()
}

gulp.task('default', gulp.series(
  browserSyncFunc,
  watchFunc,
  slimFunc,
  ...
))
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る