質問編集履歴

1 gulpfile.jsの中身をすべて追記しました

makaruon22

makaruon22 score 2

2019/08/21 17:42  投稿

ejsのパーシャルファイルがコンパイルされてしまいます。
### 前提・実現したいこと
ejsのパーシャルファイルをコンパイルさせないようにしたいです。
### 発生している問題・エラーメッセージ
```
コンパイルされてしまいます。
さらにコンパイルされたindex.htmlにはinclude指定の記述がそのままテキストで表示されています。
```
### 該当のソースコード
```ここに言語名を入力
▼フォルダ構造
gulpfile.js
src/
|_index.ejs
  partial/
     |_ _header.ejs
▼gulpfile.js
//ejs
task('ejs', function() {
 return(
   src(paths.ejs + '**/*.ejs','!' + paths.ejs + '**/_*.ejs')
   .pipe(rename({ extname: '.html' }))
   .pipe(dest(paths.html))
const gulp   = require('gulp');
const sass   = require('gulp-sass');
const sassGlob = require("gulp-sass-glob");
const notify = require("gulp-notify");
const plumber = require("gulp-plumber");
const autoprefixer = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const changed = require('gulp-changed');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const queries = require('gulp-group-css-media-queries');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const jpegtran = require('imagemin-jpegtran');
//setting : paths
const paths = {
 'allDist': './oscf/dist/*',
 'scss'  : './src/scss/',
 'css'   : './oscf/dist/css/',
 'jsSrc' : './src/js/',
 'jsDist' : './oscf/dist/js/',
 'imgSrc' : './src/img/',
 'imgDist': './oscf/dist/img/'
}
//setting : Sass Options
const sassOptions = {
 outputStyle: 'compressed',
}
//gulpコマンドの省略
const { watch, series, task, src, dest } = require('gulp');
//Sass
task('sass', function () {
 return (
   src(paths.scss + '**/*.scss')
     .pipe(plumber({ errorHandler: notify.onError({
       title: "Sassエラー発見!",
       message: "<%= error.message %>"
     })
   }))
     .pipe(sourcemaps.init())
     .pipe(sass(sassOptions))
     .pipe(sassGlob())
     .pipe(queries())
     .pipe(autoprefixer())
     .pipe(sourcemaps.write())
     .pipe(changed(paths.allDist))
     .pipe(dest(paths.css))
     .pipe(browserSync.stream())
 );
});
 
 
//JS Compress  
task('js', function () {  
 return (  
   src(paths.jsSrc + '**/*.js')  
   .pipe(plumber({  
     errorHandler: notify.onError({  
       title: "JavaScriptエラー発見!",  
       message: "<%= error.message %>"  
     })  
   }))  
     .pipe(uglify())  
     .pipe(dest(paths.jsDist))  
 );  
});  
 
 
//jpg,png,svg,gif Compress  
task('imagemin', function () {  
 return (  
   src(paths.imgSrc + '**/*.{jpg,jpeg,png,gif,svg}')  
   .pipe(imagemin(  
     [  
       pngquant({ quality: [.7, .85], speed: 1 }),  
       jpegtran({ quality: 80 }),  
       imagemin.svgo(),  
       imagemin.gifsicle()  
     ]  
   ))  
   .pipe(gulp.dest(paths.imgDist))  
 );  
});  
 
 
//browser auto reload  
task('server', function() {  
 return (  
 browserSync.init({  
   server: {  
     baseDir: './oscf/',  
   }  
 })  
 );  
});  
 
task('browser-reload', function () {  
 return (  
   browserSync.reload()  
 );  
});  
 
 
 
//watch  
watch([paths.scss + '**/*.scss'], task('sass'));  
watch([paths.jsSrc + '**/*.js'], task('js'));  
watch(['./oscf/**/*'], task('browser-reload'));  
task('default', series('sass', 'js', 'server', 'browser-reload'));  
//const paths = {'ejs' : './src/ejs/'}
▼index.ejs
<% include partial/_header %>
▼コンパイルされたindex.html
<% include partial/_header %>
↑そのまま表示される
```
### 試したこと
gulpfile.jsの「_」ファイル除外の記述
'!./src/ejs/**/_*.ejs'
直接記述してもダメでした。
  • gulp

    434 questions

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

  • EJS

    56 questions

    EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る