* Upgrade dependencies.

* Remove `grid` from style libs, update prompts, change default css engine to `scss`. * Add `static` directory, favicon set, `site.webmanifest` file. * Add task to generate service-workers using `workbox`. * Add `postcss`, `postcss-custom-properties`.
yurayarosh · Jun 22, 2021 · db13786 · db13786
1 parent b3b457d
commit db13786
Show file tree

Hide file tree

Showing 57 changed files with 577 additions and 2,590 deletions.
diff --git a/generators/app/index.js b/generators/app/index.js
@@ -6,44 +6,26 @@ const prompts = require('./prompts')
 const writeFiles = require('./writing')
 
 module.exports = class extends Generator {
-  prompting() {
+  async prompting() {
     this.log(yosay(`Welcome to the kickass ${chalk.red('front-starter-kit')} generator!`))
 
-    return this.prompt(prompts).then(props => {
-      this.props = props
-    })
+    const props = await this.prompt(prompts)
+    this.props = props
+
+    this.env.options.nodePackageManager = this.props['package-manager'] || 'npm'
   }
 
   writing() {
-    console.log(writeFiles, 'WRITE')
+    this.log(writeFiles, 'WRITE')
     writeFiles.call(this)
   }
 
-  install() {
-    if (this.props.install) {
-      this.installDependencies({
-        bower: false,
-        npm: false,
-        yarn: true,
-      })
-    } else {
-      this.log(
-        `Run ${chalk.blue('npm install')} or ${chalk.blue('yarn')} to install dependencies later.`
-      )
-    }
-  }
-
   end() {
     if (this.props.sprites.indexOf('sprite-svg') > -1) {
       this.log(
-        '\n' +
-          chalk.red("DON'T FORGET") +
-          ' to install ' +
-          chalk.blue('svg4everybody') +
-          ' or ' +
-          chalk.blue('svg-use-it') +
-          ' otherwise IE will not show you svg sprite ¯\\_(ツ)_/¯' +
-          '\n'
+        `\n${chalk.red("DON'T FORGET")} to install ${chalk.blue('svg4everybody')} or ${chalk.blue(
+          'svg-use-it'
+        )} otherwise IE will not show you svg sprite, if you relay need to support it. ¯\\_(ツ)_/¯\n`
       )
     }
     this.log(chalk.green('Done!'))

diff --git a/generators/app/prompts.js b/generators/app/prompts.js
@@ -2,41 +2,51 @@ module.exports = [
   {
     type: 'input',
     name: 'name',
-    message: 'Input project name',
+    message: 'Input project name.',
     default: 'app',
   },
   {
     type: 'input',
     name: 'author',
-    message: 'Input project author',
+    message: 'Input project author.',
   },
   {
     type: 'input',
     name: 'license',
-    message: 'Input project license',
+    message: 'Input project license.',
     default: 'MIT',
   },
   {
     type: 'list',
-    name: 'css',
-    message: 'Choose CSS engine',
+    name: 'package-manager',
+    message: 'What package manager would it be?',
     choices: [
       {
-        name: 'Sass',
-        value: 'sass',
+        name: 'Yarn',
+        value: 'yarn',
       },
       {
-        name: 'Scss',
-        value: 'scss',
+        name: 'NPM',
+        value: 'npm',
       },
     ],
     default: 0,
   },
   {
-    type: 'confirm',
-    name: 'cssGrid',
-    message: 'Add css grid to libs?',
-    default: false,
+    type: 'list',
+    name: 'css',
+    message: 'Choose CSS engine.',
+    choices: [
+      {
+        name: 'Scss',
+        value: 'scss',
+      },
+      {
+        name: 'Sass',
+        value: 'sass',
+      },
+    ],
+    default: 0,
   },
   {
     type: 'checkbox',
@@ -60,6 +70,12 @@ module.exports = [
       },
     ],
   },
+  {
+    type: 'confirm',
+    name: 'pwa',
+    message: 'Make pwa version?',
+    default: true,
+  },
   {
     type: 'confirm',
     name: 'preview',
@@ -72,10 +88,4 @@ module.exports = [
     message: 'Make multilanguage version?',
     default: false,
   },
-  {
-    type: 'confirm',
-    name: 'install',
-    message: 'Install dependencies right now?',
-    default: true,
-  },
 ]
diff --git a/generators/app/templates/gulp/config.js b/generators/app/templates/gulp/config.js
@@ -3,18 +3,19 @@ import log from 'fancy-log'
 const argv = require('minimist')(process.argv.slice(2))<% if (multilanguage) { %>
 import { existsSync, readdirSync } from 'fs'<% } %>
 
-const production =
-  argv.production || argv.prod || argv._.indexOf('build') !== -1 || false
+const production = argv.production || argv.prod || argv._.indexOf('build') !== -1 || false
 const destPath = 'build'
-const srcPath = 'src'<% if (multilanguage) { %>
+const srcPath = 'src'
+const staticPath = 'static'<% if (multilanguage) { %>
 const languagesDataPath = `${srcPath}/languages`
 
 const languageDirectories =
   existsSync(languagesDataPath) && readdirSync(languagesDataPath).length > 0
-  ? readdirSync(languagesDataPath).filter(dir => dir.indexOf('.') !== 0)
+  ? readdirSync(languagesDataPath).filter(dir => dir.indexOf('.') !== 0) // Exclude system folders starting with.
   : ['']<% } %>
 
 const config = {
+  staticPath,
   env: 'development',
   production,<% if (multilanguage) { %>
   languageDirectories,
@@ -30,12 +31,10 @@ const config = {
     stylesGen: `${srcPath}/styles/generated`,<% } %>
     js: `${srcPath}/js`,
     img: `${srcPath}/img`,
-    video: `${srcPath}/video`,
     svg: `${srcPath}/img/svg`,<% if (sprites.indexOf('sprite-svg') !== -1 || sprites.indexOf('png') !== -1 || sprites.indexOf('inline-svg') !== -1) { %>
     icons: `${srcPath}/icons`,<% } %><% if (sprites.indexOf('inline-svg') !== -1) { %>
     iconsHTML: `${srcPath}/templates/icons`,<% } %>
-    fonts: `${srcPath}/fonts`,
-    data: `${srcPath}/data`,<% if (multilanguage) { %>
+    fonts: `${srcPath}/fonts`,<% if (multilanguage) { %>
     languages: languagesDataPath,<% } %>
   },
   dest: {
@@ -44,9 +43,7 @@ const config = {
     css: `${destPath}/css`,
     js: `${destPath}/js`,
     img: `${destPath}/img`,
-    video: `${destPath}/video`,
     fonts: `${destPath}/fonts`,
-    data: `${destPath}/data`,
   },
 
   setEnv(env) {

diff --git a/generators/app/templates/gulp/tasks/copy.js b/generators/app/templates/gulp/tasks/copy.js
@@ -1,5 +1,5 @@
 import gulp from 'gulp'
-import { src, dest } from '../config'
+import { src, dest, staticPath } from '../config'
 
 gulp.task('copy:img', () =>
   gulp
@@ -11,25 +11,15 @@ gulp.task('copy:fonts', () =>
   gulp.src(`${src.fonts}/*.{woff,woff2}`).pipe(gulp.dest(dest.fonts))
 )
 
-gulp.task('copy:video', () =>
-  gulp.src(`${src.video}/**/*.*`).pipe(gulp.dest(dest.video))
-)
-
-gulp.task('copy:data', () =>
-  gulp.src(`${src.data}/**/*.*`).pipe(gulp.dest(dest.data))
-)
-
-gulp.task('copy:rootfiles', () =>
-  gulp.src(`${src.root}/*.*`).pipe(gulp.dest(dest.root))
+gulp.task('copy:static', () =>
+  gulp.src(`${staticPath}/**/*.*`).pipe(gulp.dest(dest.root))
 )
 
 const build = gulp =>
   gulp.series(
-    'copy:img',
-    // 'copy:rootfiles',
-    // 'copy:data',
-    // 'copy:video',
+    'copy:img',    
     'copy:fonts',
+    'copy:static',
   )
 const watch = gulp => () => gulp.watch(`${src.img}/*`, gulp.parallel('copy:img'))
 

diff --git a/generators/app/templates/gulp/tasks/sass.js b/generators/app/templates/gulp/tasks/sass.js
@@ -1,10 +1,20 @@
 import gulp from 'gulp'
 import sass from 'gulp-sass'
 import sourcemaps from 'gulp-sourcemaps'
-import autoprefixer from 'gulp-autoprefixer'
-import csso from 'gulp-csso'
+import autoprefixer from 'autoprefixer'
+import postcss from 'gulp-postcss'
+import csso from 'postcss-csso'
+import postcssCustomProperties from 'postcss-custom-properties'
 import { src, dest, production, errorHandler } from '../config'
 
+const processors = [
+  autoprefixer({
+    cascade: false,
+  }),
+  csso,
+  postcssCustomProperties(),
+]
+
 gulp.task('sass', () =>
   gulp
     .src(`${src.styles}/*.{sass,scss}`)
@@ -16,12 +26,7 @@ gulp.task('sass', () =>
       })
     )
     .on('error', errorHandler)
-    .pipe(
-      autoprefixer({
-        cascade: false,
-      })
-    )
-    .pipe(csso())
+    .pipe(postcss(processors))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest(dest.css))
 )

diff --git a/generators/app/templates/gulp/tasks/sw.js b/generators/app/templates/gulp/tasks/sw.js
@@ -0,0 +1,65 @@
+import gulp from 'gulp'
+import colors from 'ansi-colors'
+import { generateSW } from 'workbox-build'
+import { dest } from '../config'
+
+// Don' t cache scripts and files if has theese words in path.
+const urlPattern = ({ url }) =>
+  ![
+    'adminlte',
+    'bootstrap',
+    'pjax',
+    'fontawesome',
+    'font-awesome',
+    'glyphicons',
+    'all-skins',
+    'gridview',
+    'backend',
+    'phpmyadmin',
+    'google',
+    'ringostat',
+  ].find(excp => url.href.toLowerCase().includes(excp))
+
+gulp.task('sw', () => {
+  if (!process.env.WEBPACK_HASH) {
+    throw new Error(
+      `Environment variable ${colors.green('WEBPACK_HASH')} has to be specified via webpack task.`
+    )
+  }
+
+  return generateSW({
+    globDirectory: dest.root,
+    globPatterns: ['**/*.{json,js,css,woff2,ico,png,jpg,svg,xml}'],
+    globIgnores: ['assets/**', 'img/**', '*.map*', '*manifest', 'sw.js', '.htaccess'],
+    swDest: dest.sw,
+    additionalManifestEntries: [
+      { url: '/', revision: process.env.WEBPACK_HASH }, // Precashe start_url
+    ],
+
+    // Define runtime caching rules.
+    runtimeCaching: [
+      {
+        // Match callback function. (https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-routing#%7EmatchCallback)
+        urlPattern,
+        // Apply a cache-first strategy.
+        handler: 'CacheFirst',
+        options: {
+          // Use a custom cache name.
+          cacheName: 'runtime-v1',
+          // Plugins
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
+          expiration: {
+            maxEntries: 500,
+            maxAgeSeconds: 60 * 60 * 24, // 24 hours
+          },
+        },
+      },
+    ],
+  })
+})
+
+const build = gulp => gulp.parallel('sw')
+
+module.exports.build = build
diff --git a/generators/app/templates/gulp/tasks/webpack.js b/generators/app/templates/gulp/tasks/webpack.js
@@ -36,7 +36,10 @@ const handler = (err, stats, cb) => {
 }
 
 const webpackPromise = () =>
-  new Promise(resolve => webpack(webpackConfig, (err, stats) => handler(err, stats, resolve)))
+  new Promise(resolve => webpack(webpackConfig, (err, stats) => {
+    process.env.WEBPACK_HASH = stats.hash
+    handler(err, stats, resolve)
+  }))
 const webpackPromiseWatch = () =>
   new Promise(resolve =>
     webpack(webpackConfig).watch(
@@ -50,7 +53,6 @@ const webpackPromiseWatch = () =>
 
 const build = gulp => gulp.series(webpackPromise)
 const watch = gulp => gulp.series(webpackPromiseWatch)
-// const watch = gulp => () => gulp.watch(config.src.js + '/**/*', gulp.parallel('webpack', webpackPromise));
 
 module.exports.build = build
 module.exports.watch = watch
diff --git a/generators/app/templates/gulp/util/handle-errors.js b/generators/app/templates/gulp/util/handle-errors.js
@@ -1,13 +1,13 @@
 import notify from 'gulp-notify'
 
-module.exports = function () {
-  const args = Array.prototype.slice.call(arguments)
+module.exports = function (args) {
   notify
     .onError({
       title: 'Compile Error',
       message: '<%= error.message %>',
       sound: 'Submarine',
     })
-    .apply(this, args)
+    .apply(this, [args])
+
   this.emit('end')
 }
diff --git a/generators/app/templates/gulpfile.babel.js b/generators/app/templates/gulpfile.babel.js
@@ -14,7 +14,8 @@ gulp.task('nunjucks', () => getTaskBuild('nunjucks'))
 gulp.task('sass', () => getTaskBuild('sass'))
 gulp.task('svgo', () => getTaskBuild('svgo'))<% if (preview) { %>
 gulp.task('list-pages', getTaskBuild('list-pages'))<% } %>
-gulp.task('webpack', getTaskBuild('webpack'))
+gulp.task('webpack', getTaskBuild('webpack'))<% if (pwa) { %>
+gulp.task('sw', getTaskBuild('sw'))<% } %>
 
 gulp.task('copy:watch', getTaskWatch('copy'))<% if (sprites.indexOf('inline-svg') !== -1) { %>
 gulp.task('svgicons:watch', getTaskWatch('svgicons'))<% } %><% if (sprites.indexOf('png') !== -1) { %>
@@ -51,7 +52,8 @@ gulp.task(
     'nunjucks',
     'webpack',<% if (preview) { %>
     'list-pages',<% } %>
-    'copy'
+    'copy'<% if (pwa) { %>,
+    'sw'<% } %>
   )
 )
 
@@ -78,8 +80,7 @@ gulp.task(
     'copy:watch',<% if (sprites.indexOf('inline-svg') !== -1) { %>
     'svgicons:watch',<% } %><% if (sprites.indexOf('png') !== -1) { %>
     'sprite-png:watch',<% } %><% if (sprites.indexOf('sprite-svg') !== -1) { %>
-    'sprite:svg:watch',
-    <% } %>
+    'sprite:svg:watch',<% } %>
     'nunjucks:watch',
     'svgo:watch',<% if (preview) { %>
     'list-pages:watch',<% } %>