Gulp не обрабатывает pug-файлы

Вопрос-ответ Nodejs
1

Gulp не видит pug-шаблоны в проекте. [URL=“http://ru.stackoverflow.com/questions/609955/gulp-не-обрабатывает-pug-файлы”]Этот же вопрос на stackOverFlow[/URL]. По-видимому допускаю ошибку при задании регулярки поиска по шаблону.

Папка фронтенда в проекте:

├── frontend
│   ├── common
│   ├── node_modules
│   ├── app1
│   ├── app2
│   ├── app3
│   ├── ...
│   └── gulpfile.js

Папка каждого приложения содержит разное количество шаблонов:

├── app
│   ├── static
│   └── templates
│       └── app
│           ├── app__tmp2.pug
│           ├── app.pug
│           ├── app__tmp1.pug
│           └── app__settings.pug

Конфиг gulp предельно простой - обрабатываю шаблоны и кладу html-файлы рядом с исходником:

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

gulp.task('pug', function() {
  return gulp.src('frontend/**/*.pug', function(file){
      console.log(file)
  })
      .pipe(pug())
      .pipe(gulp.dest("./"))
});

Однако gulp не видит файлы по маске поиска frontend/**/*.pug
Результат консоли

(env)xxx@xxx:~/project/src/frontend$ gulp pug
   [20:39:38] Using gulpfile ~/project/mendeleev/src/frontend/gulpfile.js
   [20:39:38] Starting 'pug'...
   null
   [20:39:38] Finished 'pug' after 17 ms

Если я задам каталог поиска маской **/*.pug. Он обрабатывает файлы из первого каталога с шаблонами, а затем выдает ошибку:

Error: the "basedir" option is required to use includes and extends with "absolute" paths

Где допускаю ошибку? Возможно есть другие модули для работы с препроцессорами шаблонов?

2

Хотел написать про basedir, но вижу, что Вы уже на stackoverflow уже сами нашли ответ.

Проблема была в том, что запуская gulp pug из файла /frontend/gulpfile.js, указанная директория для поиска pug-шаблонов в задаче превращается в:

/frontend/ (откуда запускается задача) + frontend/**/*.pug (путь, указанный в gulp.src)
=>
/frontend/frontend/**/*.pug

Вариантов решения несколько:

  • Вынести gulpfile.js в корень проекта.
  • Указать basedir:
.pipe(pug({
    basedir: __dirname
}))
  • Указать параметр base в gulp.src 
gulp.task('pug', function() {
  return gulp.src('frontend/**/*.pug', { base: __dirname })
      .pipe(pug())
      .pipe(gulp.dest("./"))
});

Так же хотелось бы отметить, что с ростом размера проекта, Вам может понадобиться намного больше задач. Их удобно было бы разделить на отдельные файлы, а в gulpfile.js оставить главную, default'ную задачу, которая вызывала бы все остальные:

gulp.task( 'default', function() {
	runSequence(
	    'clean',
	    [ 'fonts', 'less', 'images', 'scripts' ],
	    'templates',
	    'revision',
	    'revreplace',
	    'compress',
	    'clean_temp'
	)
} );
1 лайк
3

да, спасибо. просто нужно было еще раз перечитать конфиг и доки. Про модульность gulpfile.js спасибо, запомню на будущее.

на самом деле стал использовать gulp от безысходности - не получилось обрабатывать pug-шаблоны вебпаком. если необходимо могут сделать вопрос на форуме, так он уже есть на стаке