Gulp-pug does not work

Question

Gulp-pug does not work

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I'm trying gulp and in particular the gulp-pug plugin to compile Pug. It does not seem to have much science to make it work but nevertheless there is no way.

I'm not doing any project, I'm just trying the 'task runner' Gulp and in particular the Gulp-pug plugin (which is what does not work for me)

My gulpfile is this:

'use strict'

var gulp = require('gulp');
var browserSync = require("browser-sync").create();
var pug = require('gulp-pug')
var sass = require('gulp-ruby-sass');

gulp.task('sass', function () {
  sass('./scss/**/*.scss')
    .on('error', sass.logError)
    .pipe(gulp.dest('./css'))
});

gulp.task('pug', function () {
  gulp.src('./pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./'))
});

gulp.task('serve', function() {
  browserSync.init({
    server: "./"
  });
  gulp.watch("./scss/**/*.scss", ['sass']);
  gulp.watch("./pug/**/*.pug", ['pug']);
  gulp.watch(["./*.html", "./css/*.css"]).on('change', browserSync.reload);
  gulp.watch("./js/*.js").on('change', browserSync.reload);
});

gulp.task('default', ['serve']);

Of course I have Pug installed and it works perfectly. I used it with grunt and from console without problem.

Do not throw any errors, just put

Starting 'pug'...
Finished 'pug' after 12 ms

But no traces of .html

I understand that you are not connecting with Pug and therefore does not do anything. but I do not know how to solve it.

I add a little more information.

The file that should be compiled (or traspilar) is the following:

doctype html
html(lang="es")
  head
    meta(charset="utf-8")
    title Prueba
  body
    .wrapper
      header.hidden
        h1 HOLA MUNDO

That as it looks does not have anything strange.

and the file structure.

/:.
|   gulpfile.js
|   package.json
|   
+---css
|       style.css
|       
+---node_modules
|   +--- etc...
|       
\---pug
    |   index.pug

I omit all the contents of the 'node modules' folder because it is too long and does not add much to this one.

Greetings

jade gulp pug

asked by Pablo Dominguez 20.03.2017 в 22:24

source

3 answers

Duda SQLITE query Is it possible to have two ion-Content each one occupying half the screen, independent of each other?

score 0 · Answer 1

What a good afternoon.

I do not know Pug but from what I see it is a template system and as such it needs data (context) to be used.

According to your documentation the compilation method will only return a function, which can be called later with the data of your application:

// Compile the source code
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));

Will you have your code in some repository in Github to be able to take a look?

Best regards.

score 0 · Answer 2

I must assume that the modules are properly installed.

Starting I have an observation: Although I did a test with a project with a similar distribution, I did not give an error, even though I did not include the ";" at the end of the instruction in the require ('gulp-pug') as you have it.

Now, I do not see that the code is wrong, but I share 2 versions of my tasks in gulp that I have handled and that have worked for both .jade and .pug.

This is for the .jade

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

 gulp.task('views', function() {
    var YOUR_LOCALS = {};
    // -------------------------------------  
    gulp
       .src('./src/jade/*.jade')
       .pipe(jade({
             locals: YOUR_LOCALS,
             pretty: true
       }))
      .pipe(gulp.dest('./'));
 });

This for the .pug

 var gulp = require('gulp');
 var pug = require('gulp-pug');

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

score 0 · Answer 3

gulp.task('pug', function () {
  gulp.src('./pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./'))
});

try removing the '/'

should be like this in the root of the project

gulp.task('pug', function () {
  gulp.src('./pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('.'))
});