@unic/estatico-boilerplate - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

gulpfile.js

@@ -12,8 +12,9 @@ /* eslint-disable global-require */
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
 gulp.task('html', () => {
   const task = require('@unic/estatico-handlebars');
-  const moduleTemplate = fs.readFileSync('./src/preview/layouts/module.hbs', 'utf8');
   const estaticoQunit = require('@unic/estatico-qunit');
+  const { readFileSyncCached } = require('@unic/estatico-utils');
 
@@ -71,3 +72,2 @@ const instance = task({
     plugins: {
-      clone: null,
       handlebars: {
@@ -87,3 +87,3 @@ partials: [
         if (file.path.match(/(\\|\/)modules(\\|\/)/)) {
-          return Buffer.from(moduleTemplate);
+          return Buffer.from(readFileSyncCached('./src/preview/layouts/module.hbs'));
         }
@@ -111,2 +111,7 @@
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipBuild) {
+    return instance;
+  }
+
   return instance();
@@ -119,3 +124,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -142,2 +148,7 @@ gulp.task('html:validate', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipTests) {
+    return instance;
+  }
+
   return instance();
@@ -151,3 +162,4 @@ });
  * Using `--dev` (or manually setting `env` to `{ dev: true }`) skips minification
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -230,2 +242,7 @@ gulp.task('css', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipBuild) {
+    return instance;
+  }
+
   return instance();
@@ -238,3 +255,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -258,2 +276,7 @@ gulp.task('css:lint', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipTests) {
+    return instance;
+  }
+
   return instance();
@@ -266,3 +289,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -288,2 +312,7 @@ gulp.task('css:fonts', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipBuild) {
+    return instance;
+  }
+
   return instance();
@@ -296,3 +325,3 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
  */
@@ -310,3 +339,3 @@ gulp.task('js', (cb) => {
           main: './src/assets/js/main.js',
-        }, env.dev ? {
+        }, (env.dev || env.ci) ? {
           dev: './src/assets/js/dev.js',
@@ -372,3 +401,4 @@ } : {}),
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -392,2 +422,7 @@ gulp.task('js:lint', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipTests) {
+    return instance;
+  }
+
   return instance();
@@ -400,3 +435,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -447,2 +483,7 @@ gulp.task('js:test', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipTests) {
+    return instance;
+  }
+
   return instance();
@@ -455,3 +496,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -475,2 +517,7 @@ gulp.task('js:mocks', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipBuild) {
+    return instance;
+  }
+
   return instance();
@@ -483,3 +530,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -491,3 +539,3 @@ gulp.task('media:svgsprite', () => {
     src: {
-      main: './src/assets/media/svg/**/*.svg',
+      base: './src/assets/media/svg/**/*.svg',
       demo: './src/demo/modules/svgsprite/svg/*.svg',
@@ -499,2 +547,7 @@ },
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipBuild) {
+    return instance;
+  }
+
   return instance();
@@ -507,3 +560,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -521,2 +575,7 @@ gulp.task('media:imageversions', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipBuild) {
+    return instance;
+  }
+
   return instance();
@@ -654,3 +713,4 @@ });
  *
- * Using `--watch` (or manually setting `env` to `{ dev: true }`) starts file watcher
+ * Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
+ * When combined with `--skipBuild`, the task will not run immediately but only after changes
  */
@@ -674,2 +734,7 @@ gulp.task('copy', () => {
 
+  // Don't immediately run task when skipping build
+  if (env.watch && env.skipBuild) {
+    return instance;
+  }
+
   return instance();
@@ -679,2 +744,51 @@ });
 /**
+ * Create dev and prod build directories
+ * Copies specific files into `dist/ci/dev` and `dist/ci/prod`, respectively
+ */
+gulp.task('copy:ci', () => {
+  const task = require('@unic/estatico-copy');
+  const merge = require('merge-stream');
+
+  const dev = task({
+    src: [
+      './dist/**/*',
+      '!./dist/ci/**/*',
+      '!./dist/**/*.min.*',
+      '!./dist/**/*.html',
+      './dist/**/*.dev.html',
+    ],
+    srcBase: './dist',
+    dest: './dist/ci/dev',
+    plugins: {
+      changed: null,
+      rename: (filePath) => {
+        // The `html` task creates dev versions with a `.dev.html` extension
+        // They need to be renamed to `.html`
+        if (filePath.match(/\.dev\.html/)) {
+          return filePath.replace(/\.dev\.html/, '.html');
+        }
+
+        return filePath;
+      },
+    },
+  }, env);
+
+  const prod = task({
+    src: [
+      './dist/**/*',
+      '!./dist/ci/**/*',
+      '!./dist/**/*.dev.html',
+      '!./dist/**/dev.*',
+    ],
+    srcBase: './dist',
+    dest: './dist/ci/prod',
+    plugins: {
+      changed: null,
+    },
+  }, env);
+
+  return merge(dev(), prod());
+});
+
+/**
  * Clean build directory
@@ -696,20 +810,35 @@ */
  * Create complete build
- * Prompts whether tests and linting should run
+ * Prompts whether tests and linting should run when in --watch mode
  *
  * --noInteractive / --skipTests will bypass the prompt
+ * --ci will create complete builds in `dist/ci/dev` and `dist/ci/prod` directories
  */
 gulp.task('build', (done) => {
-  const inquirer = require('inquirer');
-  const build = gulp.parallel('html', gulp.series('css:fonts', 'css'), 'js', 'js:mocks', 'media:svgsprite', 'media:imageversions', 'copy');
+  let task = gulp.parallel(
+    'html',
+    'js',
+    'js:mocks',
+    'media:svgsprite',
+    'media:imageversions',
+    'copy',
+    // When starting watcher without building, "css:fonts" will never finish
+    // In order for "css" to still run properly, we switch from serial to parallel execution
+    (env.watch && env.skipBuild) ? gulp.parallel('css:fonts', 'css') : gulp.series('css:fonts', 'css'),
+  );
+  let readEnv = new Promise(resolve => resolve());
 
-  const cb = (skipTests) => {
-    if (skipTests) {
-      gulp.series('clean', build)(done);
-    } else {
-      gulp.series('clean', 'lint', build, 'test')(done);
-    }
-  };
+  // Clean first
+  if (!env.skipBuild) {
+    task = gulp.series('clean', task);
+  }
 
-  if (!env.noInteractive && !env.skipTests) {
-    inquirer.prompt([{
+  // Create CI build structure
+  if (env.ci) {
+    task = gulp.series(task, 'copy:ci');
+  }
+
+  if (env.watch && (!env.noInteractive && !env.skipTests && !env.ci)) {
+    const inquirer = require('inquirer');
+
+    readEnv = inquirer.prompt([{
       type: 'confirm',
@@ -719,6 +848,11 @@ name: 'skipTests',
       default: false,
-    }]).then(answers => cb(answers.skipTests));
-  } else {
-    cb(env.skipTests);
+    }]).then((answers) => {
+      // Persist answer to env
+      env.skipTests = answers.skipTests;
+
+      return env;
+    });
   }
+
+  readEnv.then(() => task(done));
 });
@@ -728,3 +862,3 @@
  * Default development task
- * Prompts whether build should be created initially
+ * Prompts whether build should be created initially when in --watch mode
  *
@@ -734,19 +868,9 @@ * --noInteractive / --skipBuild will bypass the prompt
 gulp.task('default', (done) => {
-  const inquirer = require('inquirer');
+  const task = gulp.series('build', 'serve');
+  let readEnv = new Promise(resolve => resolve());
 
-  const cb = (skipBuild) => {
-    if (skipBuild) {
-      if (env.watch) {
-        // Webpack tasks need to run to be able to start watcher
-        gulp.series('js', 'serve')(done);
-      } else {
-        gulp.series('serve')(done);
-      }
-    } else {
-      gulp.series('build', 'serve')(done);
-    }
-  };
+  if (env.watch && (!env.noInteractive && !env.skipBuild)) {
+    const inquirer = require('inquirer');
 
-  if (!env.noInteractive && !env.skipBuild) {
-    inquirer.prompt([{
+    readEnv = inquirer.prompt([{
       type: 'confirm',
@@ -756,6 +880,11 @@ name: 'skipBuild',
       default: false,
-    }]).then(answers => cb(answers.skipBuild));
-  } else {
-    cb(env.skipBuild);
+    }]).then((answers) => {
+      // Persist answer to env
+      env.skipBuild = answers.skipBuild;
+
+      return env;
+    });
   }
+
+  readEnv.then(() => task(done));
 });

package.json

 {
   "name": "@unic/estatico-boilerplate",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "gulp build --noInteractive",
-    "gulp": "gulp"
+    "test": "npm run build",
+    "gulp": "gulp",
+    "build": "gulp build --ci",
+    "start": "gulp --dev --watch",
+    "netlify": "gulp build --skipTests"
   },
@@ -14,19 +17,20 @@ "author": "Unic AG",
   "devDependencies": {
-    "@unic/estatico-browsersync": "0.0.6",
-    "@unic/estatico-copy": "0.0.7",
+    "@unic/estatico-browsersync": "0.0.7",
+    "@unic/estatico-copy": "0.0.8",
     "@unic/estatico-data": "0.0.6",
-    "@unic/estatico-eslint": "0.0.7",
-    "@unic/estatico-font-datauri": "0.0.6",
-    "@unic/estatico-handlebars": "0.0.6",
-    "@unic/estatico-imageversions": "0.0.7",
-    "@unic/estatico-json-mocks": "0.0.6",
-    "@unic/estatico-puppeteer": "0.0.6",
+    "@unic/estatico-eslint": "0.0.8",
+    "@unic/estatico-font-datauri": "0.0.7",
+    "@unic/estatico-handlebars": "0.0.7",
+    "@unic/estatico-imageversions": "0.0.8",
+    "@unic/estatico-json-mocks": "0.0.7",
+    "@unic/estatico-puppeteer": "0.0.7",
     "@unic/estatico-qunit": "0.0.6",
-    "@unic/estatico-sass": "0.0.6",
-    "@unic/estatico-scaffold": "0.0.7",
-    "@unic/estatico-stylelint": "0.0.6",
-    "@unic/estatico-svgsprite": "0.0.6",
-    "@unic/estatico-w3c-validator": "0.0.6",
-    "@unic/estatico-watch": "0.0.6",
-    "@unic/estatico-webpack": "0.0.7",
+    "@unic/estatico-sass": "0.0.7",
+    "@unic/estatico-scaffold": "0.0.8",
+    "@unic/estatico-stylelint": "0.0.7",
+    "@unic/estatico-svgsprite": "0.0.7",
+    "@unic/estatico-utils": "0.0.7",
+    "@unic/estatico-w3c-validator": "0.0.7",
+    "@unic/estatico-watch": "0.0.7",
+    "@unic/estatico-webpack": "0.0.8",
     "autoprefixer": "^7.2.5",
@@ -33,0 +37,0 @@ "change-case": "^3.0.1",

src/data/default.data.js

@@ -11,4 +11,4 @@ const parseArgs = require('minimist');
     svgSprites: JSON.stringify([
-      '/assets/media/svg/base.svg',
-      '/assets/media/svg/demo.svg',
+      // '/assets/media/svgsprite/base.svg',
+      '/assets/media/svgsprite/demo.svg',
     ]),
@@ -15,0 +15,0 @@ },

src/demo/modules/svgsprite/svgsprite.data.js

@@ -31,3 +31,3 @@ const _ = require('lodash');
     svgSprites: JSON.stringify(JSON.parse(defaultData.props.svgSprites || '[]').concat([
-      '/assets/media/svg/demo.svg',
+      '/assets/media/svgsprite/demo.svg',
     ])),
@@ -34,0 +34,0 @@ preview: sprites,

src/demo/modules/svgsprite/svgsprite.md

@@ -21,13 +21,13 @@ ## Description
 
-	```html
-		<body data-svgsprites-options="['../../assets/media/svg/base.svg',{{path to needed group}}]">
-	```
+    ```html
+        <body data-svgsprites-options="['../../assets/media/svgsprite/base.svg',{{path to needed group}}]">
+    ```
 
 2. Add the html snippet below to the module or page. Replace `icon` with the name of the icon you want to use and `class` with whatever CSS class you need.
 
-	```html
-		<svg class="{{class}}" focusable="false">
-			<use xlink:href="#{{icon}}" />
-		</svg>
-	```
+    ```html
+        <svg class="{{class}}" focusable="false">
+            <use xlink:href="#{{icon}}" />
+        </svg>
+    ```
 
@@ -39,8 +39,8 @@
 
-	```html
-		<svg class="{{class}}" focusable="false">
-			<use xlink:href="/assets/media/svg/base.svg#{{icon}}" />
-		</svg>
-	```
+    ```html
+        <svg class="{{class}}" focusable="false">
+            <use xlink:href="/assets/media/svgsprite/base.svg#{{icon}}" />
+        </svg>
+    ```
 
 This simplifies the setup a lot, however, the backend would need to update the `xlink:href` attribute whenever an icon is moved between sprites, e.g.

No alert changes

Improved metrics

Total package byte prevSize

323108

increased by1.29%

Lines of code

2395

increased by4.68%

Worsened metrics

Dev dependency count

27

increased by3.85%

No dependency changes