v6.2.0

Changes:

Config

• The app.config.cjs file has been added to the application root, containing several options that will be used when building the project:
  • dirs - an object containing the names of the main directories of the project: root, dist, src, archive folder
  • isProd (default process.argv.includes('--production')) - a boolean value indicating whether the build is running in production mode.
  • serverPort (default 9050) - port of the server where browser-sync is running.
  • reloadDebounce (default 100) - wait for a specified window of event-silence before sending any reload events.
  • availableFontFormats (default ['otf', 'ttf', 'woff', 'woff2']) - array of font formats supported by the build. Used by the createFontStylesFile task.
  • separateMultiwordFontNames (default true) - a boolean indicating whether to separate font names with multiple words.
  • scssFontsFile (default ${dirs.src}/base/styles/_fonts.scss) - path to file containing @font-face declarations.
  • pathsToDelete (default dirs.dist) - specifying directories or files that need to be deleted when starting the cleanup task.
  • sortingMediaQueriesMode (default desktop-first) - sorting media queries mode which postcss-sort-media-queries uses.
  • environment - current build environment (production or development).
• gulp/config/plugins.js no longer makes sense as gulp-load-plugins is now used.
• In gulp/config/paths.js objects dist, src, watch now have named export.

Gulp

• Global variable $ in gulpfile.babel.js has been removed in favor of importing gulp, paths, plugins directly into Gulp tasks.
• The use of the gh-pages CLI plugin has been removed in favor of creating the gulp/tasks/publish.js task.

JS

• In order to support ES6+ and provide a smaller bundle size, the decision was made to switch from Webpack to Rollup.
• Removed following Babel plugins: @babel/plugin-proposal-class-properties, @babel/plugin-syntax-dynamic-import because they are included in @babel/preset-env by default.

Pug

• Due to the repetitive code of getting BEM modifications to Pug components and adding them to a class, in Pug was built function that does this and is reusable. Syntax:

//- @param { string } component-name
//- @param { string } mods
//- @returns { string } component-name with his BEM modificators
getModes('<component-name>', '<mods>');

//- @example
p(class=getModes('paragraph', 'lg,red')) Paragraph

<!-- compiles to -->
<p class='paragraph paragraph_lg paragraph_red'>Paragraph</p>

Dependencies

• Updated dependencies.
• Bump decode-uri-component from 0.2.0 to 0.2.2 by @dependabot in #4
• Bump json5 from 1.0.1 to 1.0.2 by @dependabot in #5

v6.1.0...v6.2.0