Próbuję owinąć moją głowę gulp i nowoczesne łączenie javascript.


Aplikacja jest dość prosta:

  1. Strona HTML jest wyświetlana użytkownikowi, gdzie musi sprawdzić kilka przycisków radiowych.
  2. Następnie użytkownik przesyła jego wybory, klikając przycisk.
  3. Po przesłaniu wyboru plik JSON musi być analizowany, aby wyświetlić jeden wśród 20 możliwych stron HTML

Mam następującą (uproszczoną) strukturę:

dist/
    index.html
src/
    scripts/
          main.js
          modules/
                 dispatchForm.js
    styles/  
          index.scss
    templates/
          index.pug
          partials/
                  default.pug
                  selectors.pug
gulpfile.js
data.json

W moim gulpfile.js mam:

const bundler = () => {
  return rollup({
    input: './src/scripts/main.js',
    plugins: [
      babel(pkg.babel),
      nodeResolve(),
      commonJS(),
    ],
  }).then((bundle) => bundle.write({
    file: '.tmp/bundle.js',
    format: 'umd',
    sourceMap: 'inline',
  }));
};

const uglify = () => {
  return src('.tmp/bundle.js', {sourcemaps: true})
      .pipe(plugins.uglify())
      .pipe(dest('.tmp'))
      .pipe(plugins.size({title: 'bundler minified'}));
};

const styles = () => {
  const AUTOPREFIXER_BROWSERS = [
    'ie >= 10',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4.4',
    'bb >= 10',
  ];

  return src([
    'src/styles/main.scss',
    'src/styles/**/*.css',
  ])
      .pipe(plugins.sassGlob())
      .pipe(plugins.sass({
        precision: 10,
      }).on('error', plugins.sass.logError))
      .pipe(plugins.autoprefixer(AUTOPREFIXER_BROWSERS))
      .pipe(dest('.tmp'))
      .pipe(plugins.if('*.css', plugins.cssnano()))
      .pipe(dest('.tmp'))
      .pipe(plugins.size({title: 'styles'}));
};

// Uses PUG as template
const templates = (env) => () => {
  return src('./src/templates/*.pug')
      .pipe(plugins.pug({locals: {
        title: pkg.title,
        description: pkg.description,
        env,
      }}))
      .pipe(dest('dist'))
      .pipe(plugins.size({title: 'templates'}));
};

const reload = (done) => {
  server.reload();
  return done();
};


const images = (env) => () => {
  const destination = env === 'deploy' ? 'dist' : '.tmp';

  return src('./src/images/**/*.{gif,jpg,png,svg}')
      .pipe(dest(destination))
      .pipe(plugins.size({title: 'size'}))
};


const serve = () => {
  server.init({
    notify: false,
    logPrefix: 'WSK',
    scrollElementMapping: ['main', '.mdl-layout'],
    server: ['.tmp', 'dist'],
    port: 3000,
  });

  watch(
    ['src/**/*.pug'],
    series(templates('development'), reload)
  );

  watch(
    ['src/styles/**/*.{scss,css}'],
    series(styles, templates('development'), reload)
  );

  watch(
    ['src/scripts/main.js', 'src/scripts/**/*.js'],
    series(bundler, templates('development'), reload)
  );

  watch(
    ['src/images/**/*.{gif,jpg,png,svg}'],
    series(images('development'), templates('development'), reload)
  );
};

const clean = () => del(['.tmp', 'dist/*', '!dist/.git'], {dot: true});

exports.default = series(
    clean,
    bundler,
    uglify,
    styles,
    templates('deploy'),
    images('deploy')
);

exports.serve = series(
    bundler,
    styles,
    templates('development'),
    images('development'),
    serve
);

Sposób, w jaki go rozumiem, po sprzątaniu plików, Bundler będzie:

  • Podaj stronę html w folderze dist po kompilacji z moich źródeł main.js, dispatchForm.js, scss i pug szablony.

Main.js

import dispatchForm from './modules/dispatchForm';

const domContentLoad = (fn) => {
  if (document.readyState !== 'loading') fn();
  else document.addEventListener('DOMContentLoaded', fn);
};

domContentLoad(() => {
  dispatchForm();
});

DispatchForm.js

const button = document.querySelector('[data-calculator-button]');

function updateValue() {
  const gain  = document.querySelector('[data-calculator-form][name="gain"]:checked');
  const cost  = document.querySelector('[data-calculator-form][name="cost"]:checked');

  if (gain && cost) {
    button.removeAttribute('disabled');
    button.classList.remove('selectors__button--inactive');
  } else {
    button.setAttribute('disabled', '');
    button.classList.add('selectors__button--inactive');
  }
}

function dispatchForm() {
  const radioInput = document.querySelectorAll('[data-calculator-form]');
  radioInput.forEach(element => element.addEventListener('input', updateValue));
}

export default dispatchForm;

selekcjonerów.pug

...

.selectors__form
    .selectors__radio
      input.selectors__input(type='radio' id='gain-points' name='gain' value='points' data-calculator-form)
      label.selectors__label(for='gain-points')

    .selectors__radio
      input.selectors__input(type='radio' id='gain-money' name='gain' value='money' data-calculator-form)
      label.selectors__label(for='gain-money')

.selectors__form
for value in [70, 80, 90, 100, 110, 120, 130]
  .selectors__radio
    input.selectors__input(type='radio' id=`have-${value}` name='cost' value=value data-calculator-form)
    label.selectors__label(for=`have-${value}`)
      | Até 
      b= ` C$${value}`

button.selectors__button.selectors__button--calculate.selectors__button--inactive(disabled=true data-calculator-button)
...

Powyższe tworzy niektóre selektory do "kosztów" lub "wzmocnienia" z selectors.pug, main.js i dispatchForm.js i dispatchForm.js, przez {x2}} s 'bundler' i renderuje go jako {{x4 }}.


Ale teraz chciałbym:

  1. Użyj jednego z dwóch przedłożonych wartości ({x0}}) i przekazać go jako argument do funkcji, która przeanalizuje JSON file.

  2. Wreszcie, analizowany wynik JSON zostanie przekazany do innego pliku {x0}}


Pytania

  1. Jak dostać ten json (z dispatchForm.js? Z gulpfile.js? Z pug natywnie?) I przekazać go do innego szablonu pug?

  2. Jeżeli JSON pobiera się w oddzielnym module JS, ponieważ wyświetlany JSON będzie renderowany na oddzielnej stronie HTML, przy użyciu innego szablonu mopsa częściowego? Jak to?

  3. Jeśli wygenerowano wszystkie możliwe drugi plik plików HTML w czasie kompilacji, a JS będzie używany do wyświetlania tylko na podstawie złożonej wartości? Czy taka druga strona HTML będzie renderowana dinamowo?


Gulp-Data

Dowiedziałem się również, że są pakiety, takie jak Gulp-Data, używany do obsługi danych JSON, I nie wiem, czy są sposobem na pójście tutaj.


Również to Więc pytanie wskazówki Jak przekazać pug JSON obiekty do strony klienta Javascript.

1
8-Bit Borges 20 październik 2020, 06:44

1 odpowiedź

Najlepsza odpowiedź

Sposób, w jaki zwinąłeś to pytanie, sprawia, że myślę, że Twoim głównym problemem jest konflikt Krok kompilacji z aplikacją "Runtime" (jak w przypadku, gdy użytkownicy korzystają z aplikacji), jak gdy wysyłanie. Gulp to narzędzie do generowania projektu, ale to ma się zdarzyć, zanim ktokolwiek interakcji z Twoją witryną.

Tak więc pytanie, w którym powiązałeś, ma ekspresową renderowanie stron mops w "Runtime", który architektonialnie jest dość różni się od tego, że wystąpią w kroku kompilacji z Gulp.

Jeśli rozumiem, co chcesz poprawnie, poza górną głową, jest 3 główne sposoby, aby to zrobić. Pierwszym byłoby, aby mieć po stronie klienta JS manipulować domem i odpowiednio zmienić stronę. Możesz użyć mopsa dla tego, renderowany w bibliotece JS za pośrednictwem czegoś takiego jak Rollup-Plugin-Plug (znaleziono za pomocą tego Więc odpowiedz).

Drugi byłby to wezwanie API na serwer, który następnie sprawia, że mops szablon (co jest tym pytaniem, jakie powiązałeś).

Lub trzecie, możesz zrobić coś takiego jak renderowanie wszystkich możliwych stron, które chcesz, aby użytkownicy udali się w czasie budowy, a po prostu sprawiają, że DispatryForm.js po prostu wysyła je na odpowiednie strony. W tym przypadku zalecam określenie tych opcji w jednym miejscu (w Powiedzieniu, plik JSON) i mający być źródłem rurociągu Gulp. Dostaje trochę Zany, że Gulp generuje wiele plików z jednego pliku, ale można znaleźć wiele sposobów, jakie ludzie zrobili coś podobnego jak Ta github nić, Ta odpowiedź na przepełnienie stosu, Ten gist itd.

Edytować

Jeśli chcesz, aby rzeczy mogły się zdarzyć "po wybraniu", to jest sposób 1. Tak za pomocą wtyczki wtykowej, wyglądałoby to coś takiego (całkowicie niesprawdzona i poza górą głowy):

//- template.pug
.content
  p= gain
  p= cost

// modules/calculateButton.js
import templateFn from '../../templates/partials/template.pug';
 
const button = document.querySelector('[data-calculator-button]');
button.addEventListener('click', (e) => {
   if (e.target.getAttribute('disabled')) return;
   const gain  = document.querySelector('[data-calculator-form][name="gain"]:checked').value;
  const cost  = document.querySelector('[data-calculator-form][name="cost"]:checked').value;
  
  document.getElementById("result").innerHTML = templateFn({
    gain, cost
  });
});

W przeciwnym razie nic nie jest analizowane na przełożonym. W przypadku przykładów trzeciej drogi poleciłbym sprawdzić linki wysłane powyżej. Wiele kompilacyjnych skryptów znajduje się po prostu własny sposób na robienie rzeczy, które ma odpowiednią ilość mocy / złożoności zrównoważoną z łatwością konserwacji.

0
halfer 30 październik 2020, 08:22