Как внедрять html-шаблонизатор в gulp | webpack сборку?

Gulp.js и Webpack - два популярных инструмента для автоматизации сборки проектов. Они оба позволяют упростить и ускорить процесс разработки, включая задачу интеграции html-шаблонизатора.

HTML-шаблонизаторы - это инструменты, которые позволяют разделить разметку и логику представления. Они обеспечивают возможность использования переменных, циклов, условий и других конструкций языка программирования в html-шаблонах. Наиболее популярные веб-шаблонизаторы, такие как Handlebars, Mustache, EJS и Pug, предоставляют различные синтаксические конструкции и возможности.

Чтобы интегрировать html-шаблонизатор в сборку Gulp.js или Webpack, вам понадобятся следующие шаги:

1. Установите необходимые зависимости:
- Для Gulp.js:

     npm install --save-dev gulp-handlebars handlebars

- Для Webpack, используя Handlebars:

     npm install --save-dev handlebars handlebars-loader

Установите другие необходимые пакеты, если вы выбрали другой html-шаблонизатор.

2. Создайте папку для хранения html-шаблонов. Обычно эта папка называется templates или views, но вы можете выбрать любое имя и любую структуру каталогов по своему усмотрению.

3. Создайте файл html-шаблона с расширением, принятым для вашего выбранного шаблонизатора. Например, если вы используете Handlebars, создайте файл с расширением .hbs. Если вы используете Pug, создайте файл с расширением .pug и так далее.

4. Создайте Gulp.js- или Webpack-задачи для компиляции html-шаблонов:
- Gulp.js:

     const gulp = require('gulp');
     const handlebars = require('gulp-handlebars');
     const wrap = require('gulp-wrap');
     const declare = require('gulp-declare');
     const concat = require('gulp-concat');
     
     gulp.task('templates', function() {
       return gulp.src('templates/**/*.hbs')
         .pipe(handlebars())
         .pipe(wrap('Handlebars.template(<%= contents %>)'))
         .pipe(declare({
           namespace: 'MyApp.templates',
           noRedeclare: true,
         }))
         .pipe(concat('templates.js'))
         .pipe(gulp.dest('dist/js'));
     });

- Webpack с использованием Handlebars:

     const path = require('path');
     
     module.exports = {
       // ...
       module: {
         rules: [
           // ...
           {
             test: /.hbs$/,
             loader: 'handlebars-loader',
             options: {
               helperDirs: path.resolve(__dirname, 'src/helpers'),
               inlineRequires: //images//,
             },
           },
         ],
       },
     };

В этих примерах Gulp.js задача компилирует и объединяет все html-шаблоны в один файл templates.js, который сохраняется в папке dist/js. В Webpack конфигурации, задана загрузчик handlebars-loader для файлов с расширением .hbs.

5. Создайте и вызовите соответствующие задачи сборки в вашем Gulp.js- или Webpack-конфигурационном файле:
- Gulp.js:

     gulp.task('build', gulp.series('templates', /* другие задачи сборки */));

- Webpack:

     module.exports = {
       // ...
       plugins: [
         // ...
         new HtmlWebpackPlugin({ /* настройки плагина */}),
         // ...
       ],
       // ...
     };

В этих примерах показано, как добавить новую задачу templates в Gulp.js и вызвать ее в основной задаче сборки build. В Webpack конфигурации, плагин HtmlWebpackPlugin используется для встраивания скомпилированных html-шаблонов в генерируемые html-файлы.

Теперь, после завершения сборки, ваши html-шаблоны будут скомпилированы и использованы в вашем проекте. Вы можете вставлять их в различные страницы, используя генерируемые функции-шаблоны или плагины, в зависимости от вашего выбранного инструмента. Кроме того, вы можете использовать специфичные для шаблонизатора функции, такие как partials, helpers и т. д., чтобы дополнительно улучшить ваш процесс разработки.