gulp-ejsをインストールすることで、「index.ejs」を「index.html」にコンパイルすることができました。ただ、コンパイルするためにはターミナルで「$ gulp ejs」を毎度打ち込まないと「index.html」に反映がされません。
sassやjsが自動でリロード&コンパイルするように記述はすでにしていて、
「$ gulp」のみをターミナルで打ち込めば保存と同時にブラウザに自動反映されます。
また、「index.html」のみの変更であればそれも保存と同時にブラウザに自動反映されます。
できれば ターミナルで「$ gulp ejs」を打たずに、
html内に共通化の部分である「_head.ejs」や「_footer.ejs」を保存と同時に「index.ejs」に自動に読み込ませ、その読み込ませた「index.ejs」を「index.html」に自動でコンパイルし、
ブラウザに自動で反映するようにしたいと考えています。
調べてもなかなか全てをオート化ができずに困っています。
どなたかアドバイスをいただけないでしょうか?
以下が「gulpfile.js」の内容です。
js
1var gulp = require("gulp"); 2var gulpSass = require('gulp-sass'); 3var notify = require('gulp-notify'); 4var plumber = require('gulp-plumber'); 5var browserSync = require('browser-sync'); 6var ejs = require('gulp-ejs'); 7 8// 1. SASSをCSSに変換するタスク---------------------------- 9// gulp.task([第1引数:タスク名], [第2引数:タスクで行う処理]) 10gulp.task('sass', function(){ 11 gulp.src('sass/*.scss') 12 // どのファイルを処理対象にするかのptn 13 .pipe(plumber({errorHandler: notify.onError('<%- error.message %>')})) 14 .pipe(gulpSass()) // pipe([処理内容]) 15 .pipe(gulp.dest('css')) // gulp.dest([書き出し先]) 16 .pipe(browserSync.reload({ 17 stream: true 18 })); 19}); 20 21// 2. リロードするだけのタスク----------------------------- 22// browser-sync を使用 23gulp.task('reload', function(){ 24 browserSync.reload(); 25}); 26 27// 3. デフォルトタスク------------------------------------ 28// ptnにマッチするファイルを監視し、変更のタイミングでタスクを実行 29// browser-sync でオートリロードを実行 30gulp.task('default', function(){ 31 browserSync({ 32 server: { 33 baseDir: './' 34 } 35 }); 36 // gulp.watch(['app/ejs/common/*.ejs', '!node_modules'], ['html']); 37 // gulp.watch(['app/ejs/*.ejs', '!node_modules'], ['html']); 38 gulp.watch(['app/public/*.html', '!node_modules'], ['reload']); 39 gulp.watch(['sass/*.scss', '!node_modules'], ['sass']); 40 gulp.watch(['**/*.js', '!node_modules'], ['reload']); 41}); 42 43//HTMLに変換して出力する--------------------------------- 44gulp.task("ejs", function() { 45 gulp.src( 46 //(1)EJSファイルの参照先ディレクトリ名 47 //「’!’ + “app/dev/ejs/**/_*.ejs”」の部分で、「_(アンダーバー)で始まるejsファイルは参照し![イメージ説明](e01c1f2e2485417743f1c07449219411.png)設定を行っています。こうしておくことで、HTMLとして出力したくないファイルにはアンダーバーをつければよくなります 48 ["app/ejs/**/*.ejs",'!' + "app/ejs/**/_*.ejs"] 49 ) 50 //(2).pipe(ejs({}, {ext: '.html'}))に変更することで、.htmlファイルが生成されるようになった。 51 .pipe(ejs({}, {ext: '.html'})) 52 //(1)EJSファイルをHTMLに変換/出力する先のディレクトリ名を入れます。 53 .pipe(gulp.dest("app/public")) 54}); 55
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/03 17:04