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

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

新規登録して質問してみよう
ただいま回答率
85.35%
include

あるファイルで定義された関数や処理を、別のファイル上でも使用できるようにするプロセスをincludeと呼びます。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

0回答

929閲覧

slimのincludeについて

bambi_ak

総合スコア0

include

あるファイルで定義された関数や処理を、別のファイル上でも使用できるようにするプロセスをincludeと呼びます。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/07/16 15:32

前提・実現したいこと

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

slim

1doctype 5 2html 3 head 4 = render 'head' 5 title askChat 6 body 7 = render 'header' 8 main 9 .l-profile_container 10 figure.m-profile_thumb 11...

■header.slim

slim

1header.l-header 2 .p-header_inner 3 a.p-header_global_logo href="/" 4...

■head.slim

slim

1 meta charset="utf-8" 2 meta http-equiv="content-language" content="ja" 3 meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" 4 meta name="format-detection" content="telephone=no" 5 meta http-equiv="X-UA-Compatible" content="ie=edge" 6 meta name="description" content="" 7 meta name="keywords" content="" 8 9 / ogp 10 meta property="og:title" content="" 11 meta property="og:description" content="" 12 meta property="og:site_name" content="" 13 meta property="og:locale" content="ja_JP" 14 meta property="og:url" content="" 15 meta name="twitter:url" content="" 16 meta property="og:image" content="" 17 meta name="twitter:image:src" content="" 18 meta name="author" content="" 19 20 / ogp & twitter 21 meta property="og:type" content="website" 22 meta property="og:locale" content="ja_JP" 23 meta property="fb:app_id" content="" 24 meta name="twitter:card" content="summary_large_image" 25 meta name="twitter:site" content="" 26 meta name="twitter:creator" content="" 27 meta name="twitter:domain" content="" 28 meta property="og:site_name" content="" 29 30 link href="./css/style.css" rel="stylesheet"

試したこと

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

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

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

■package.json

json

1{ 2 ... 3 "scripts": { 4 "dev": "gulp", 5 "build": "gulp build", 6 "lint": "gulp lint", 7 "dist": "run p lint build" 8 }, 9 "devDependencies": { 10  ... 11 "browser-sync": "^2.26.7", 12 "gulp": "^4.0.2", 13 "gulp-notify": "^3.2.0", 14 "gulp-plumber": "^1.2.1", 15 "gulp-slim": "^0.3.0", 16 ... 17 }, 18 ... 19}

■gulpfile.js

javascript

1const gulp = require('gulp') 2const browserSync = require('browser-sync') 3const slim = require('gulp-slim') 4... 5const plumber = require('gulp-plumber') 6const notify = require('gulp-notify') 7... 8const OPTIONS = { 9 ROOT_PATH: './public', 10 SRC_PATH: './src', 11 PUBLIC_PATH: './public', 12 BUILD_PATH: './dist', 13 ... 14} 15 16const browserSyncFunc = done => { 17 browserSync.init({ 18 server: { 19 baseDir: OPTIONS.ROOT_PATH 20 }, 21 port: 3333, 22 reloadOnRestart: true 23 }) 24 done() 25} 26 27const slimFunc = () => { 28 return gulp.src(`${OPTIONS.SRC_PATH}/views/*.slim`) 29 .pipe(plumber({ 30 errorHandler: notify.onError('<%= error.message %>') 31 })) 32 .pipe(slim({ 33 require: 'slim/include', 34 pretty: true, 35 options: 'include_dirs=["./src/views/includes"]' 36 })) 37 .pipe(gulp.dest(OPTIONS.PUBLIC_PATH)) 38 .pipe(browserSync.stream()) 39} 40 41const watchFunc = done => { 42 gulp.watch([`${OPTIONS.SRC_PATH}/views/*.slim`], gulp.parallel(slimFunc)) 43 ... 44 done() 45} 46 47gulp.task('default', gulp.series( 48 browserSyncFunc, 49 watchFunc, 50 slimFunc, 51 ... 52))

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問