How to compile pug (formerly jade) to php with gulp?

Question

How to compile pug (formerly jade) to php with gulp?

I'm working on a project that you need to work with .php, I've always worked with .html, but now I have to work it with .php, I work with pug previously called jade and compile it by means of tasks in gulp, but by default it is compiled in html, but I want to know if there is a way to pass it to php with gulp.

2

Author: MichaelCardoza, 2016-10-14

Source

2 answers

score 1 · Answer 1

This problem was presented to me by having the requirement of the programmer to use php statements and thus handle the sessions on the site without using sessionStorage, because we had problems with cache, and not wanting separates the layout I had in .pug.

The solution to this problem was very simple.

Check if .pug had no conflicts with the tag , this I did in codepen.io
Then look for a module in npm that can handle the change of extension, the solution I found with this module: gulp-rename.
Already with that modify my gulp task:

var // Modulos de desarrollo
  gulp = require('gulp'),
  pug = require('gulp-pug'),
  rename = require("gulp-rename");


gulp.task('views', function() {
  gulp
    .src('./' + desarrollo + '/pug/*.pug', {
      base: './' + desarrollo + '/pug/'
    })
    // -------------------------------------
    .pipe(pug({
      locals: {},
      pretty: true
    }))
    // ------------------------------------- 
    .pipe(rename({
      extname: ".php"
    }))
    // ------------------------------------- 
    .pipe(gulp.dest('./'));
});

html
  head title php in my pug 
  body 
    main
    // Declaración php
    <?php echo 'I`m a php'?>
    h1 Hello #[br] #[small &lt;?php echo 'pug' ?&gt;]

score 0 · Answer 2

You can use an npm package called gulp-jade-php in addition to pug

Jade-php

Usage example:

var jade = require('gulp-jade-php');

gulp.task('templates', function() {
gulp.src('./views/**/*.jade')
    .pipe(jade({
        locals: {
        title: 'OMG THIS IS THE TITLE'
        }
    }))
    .pipe(gulp.dest('./dist'));
});