前提・実現したいこと
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))
あなたの回答
tips
プレビュー