Можете помочь разобраться с gulp-nunjucks-render уже 5 раз повторяю по инструкции из обучающего видео а результата нет?

Question

[Djoni Kage]

не создаётся index.html в корневом каталоге уже 5 раз перепробовал результат тот же вот данные

gulpfile.js

const { src, dest, watch, parallel, series  } = require('gulp');

const scss              = require("gulp-sass")(require("sass"));
const concat            = require("gulp-concat");
const autoprefixer      = require("gulp-autoprefixer");
const uglify            = require("gulp-uglify");
const imagemin          = require("gulp-imagemin");
const nunjucksRender    = require("gulp-nunjucks-render");
const del               = require("del");
const { reload }        = require('browser-sync');
const browserSync       = require("browser-sync").create();

function nunjucks() {
  return src("app/*.njk")
    .pipe(nunjucksRender())
    .pipe(dest("app"))
    .pipe(browserSync.stream());
}


function browsersync(params) {
  browserSync.init({
    server:{
      baseDiu:'app/'
    },
    notify:false 
  })
}



function styles() {
  return src("app/scss/style.scss")
    .pipe(scss({ outputStyle: "compressed" }))
    .pipe(concat("style.min.css"))
    .pipe(
      autoprefixer({
        overrideBrowserslist: ["last 10 versions"],
        grid: true,
      })
    )
    .pipe(dest("app/css"))
    .pipe(browserSync.stream());
  
}


function scripts() {
  return src([
    "node_modules/jquery/dist/jquery.js",

    "node_modules/slick-carousel/slick/slick.js",

    "node_modules/@fancyapps/fancybox/dist/jquery.fancybox.js",

    "node_modules/rateyo/src/jquery.rateyo.js",

    "node_modules/ion-rangeslider/js/ion.rangeSlider.js",

    "node_modules/jquery-form-styler/dist/jquery.formstyler.js",

    "app/js/main.js",
  ])
    .pipe(concat("main.min.js"))
    .pipe(uglify())
    .pipe(dest("app/js"))
    .pipe(browserSync.stream());
  
}

function images() {
  return src("app/images/**/*.*")
    .pipe(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.mozjpeg({ quality: 75, progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
        }),
      ])
    )
    .pipe(dest("dist/images"));
}

function build() {
  return src([
    'app/**/*.html',
    'app/css/style.min.css',
    'app/js/main.min.js',

  ], {base:'app'})
  .pipe(dest('dist'))
}

function cleanDist(params) {
  return del('dist')
}


function watching() {
  watch(["app/scss/**/*.scss"], styles);
  watch(["app/*.njk"], nunjucks);
  watch(['app/js/**/*.js','!app/js/main.min.js'], scripts);
  watch(['*.html']).on('change',browserSync.reload);

}


exports.styles = styles;

exports.scripts = scripts;

exports.browsersync = browsersync;

exports.watching = watching;

exports.images = images;

exports.nunjucks = nunjucks;

exports.cleanDist = cleanDist;

exports.build = series(cleanDist, images, build);

exports.default = parallel(nunjucks, styles, scripts, browsersync, watching);

package.json

{
  "name": "gulp-start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dj",
  "license": "ISC",
  "devDependencies": {
    "@fancyapps/fancybox": "^3.5.7",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-nunjucks-render": "^2.2.3",
    "gulp-sass": "^5.0.0",
    "ion-rangeslider": "^2.3.1",
    "rateyo": "^2.3.2",
    "sass": "^1.44.0",
    "slick-carousel": "^1.8.1"
  },
  "dependencies": {
    "@fancyapps/ui": "^4.0.11",
    "browser-sync": "^2.27.7",
    "gulp-uglify": "^3.0.2",
    "jquery": "^3.6.0",
    "jquery-form-styler": "^2.0.2"
  }
}

какие еще данные нужны?

встало обучение 3 день не могу решить где ошибка.

Answer 1

[Vyach Gor]

Выложи свои исходники в архиве (без node_modules если ж что), потому как скорее всего ты что не так подключил или структуру не так накидал. С пары скринов никто не возьмется гадать.

Comments

[Djoni Kage]

https://cloud.mail.ru/public/TXk3/e6vN3sJMQ

[Vyach Gor]

1 nunjucks файлы должны находиться в папке app что бы watcer gulp их видел - так что перенесите njk файл выше
2 сразу наперед - include для nunjucks должны указываться от корня проекта то есть с учетом папки app по типу
3 опечатка в опции browserSync нужно baseDir, а не baseDiu

[Djoni Kage]

Vyach Gor, Благодарю за помощь ,получается просто index.njk должен находится в папке app ?

[Djoni Kage]

Vyach Gor, Благодарю за помощь ,получается просто index.njk должен находится в папке app ?

[Vyach Gor]

Djoni Kage, и index.njk и все остальные файлы nunjucks - так настроен шаблон

Answer 2

[Александр]

1. Выпиливаем gulp-nunjucks-render.
2. Ставим gulp-nunjucks в devDependencies.
3. Исправляем require.
4. Меняем nunjucksRender() на nunjucks.compile().
gulp-nunjucks

P.S. - если видите, что видео/курс старое (более года), ищите посвежее.

Comments

[Djoni Kage]

простите что значит . Выпиливаем gulp-nunjucks-render.?

Ставим gulp-nunjucks в devDependencies. можно по подробней как это реализовать?

Исправляем require. что именно исправить?

Меняем nunjucksRender() на nunjucks.compile(). с эти вроде понятно

[Djoni Kage]

курс 2021 года у автора все работает у меня не создаётся. index.html даже

[Александр]

Djoni Kage,

npm uninstall gulp-nunjucks-render
npm install gulp-nunjucks -D

- const nunjucksRender    = require("gulp-nunjucks-render");
+ const nunjucks = require("gulp-nunjucks");

- .pipe(nunjucksRender())
+ .pipe(nunjucks.compile())

а также вот это исправьте:
1. В папке app нет ни одного njk-файла.
2. В include будет ошибка, надо будет app/module/....

Answer 3

[Djoni Kage]

https://cloud.mail.ru/public/TXk3/e6vN3sJMQ вот ссылка на архив