{"_id":"@alotool/bl-pack","name":"@alotool/bl-pack","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@alotool/bl-pack","version":"0.0.1","description":"A tool for develop Blogger theme.","license":"MIT","homepage":"https://github.com/alotool/bl-pack/tree/main#readme","repository":{"type":"git","url":"git+https://github.com/alotool/bl-pack.git"},"bugs":{"url":"https://github.com/alotool/bl-pack/issues"},"author":{"name":"alotool","email":"alotool360@gmail.com","url":"https://alotool.github.io"},"keywords":["@alotool","bl-pack","blogger","blogspot"],"bin":{"bl-pack":"bin.js"},"dependencies":{"@babel/core":"7.15.5","@babel/eslint-parser":"7.15.7","@babel/preset-env":"7.15.6","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"20.0.0","@rollup/plugin-node-resolve":"13.0.5","@rollup/stream":"2.0.0","@taufik-nurrohman/quote":"0.0.14","autoprefixer":"9.8.6","chalk":"4.1.2","chokidar":"3.5.2","commander":"8.2.0","cross-spawn":"7.0.3","dedent":"0.7.0","del":"6.0.0","fibers":"5.0.0","glob":"7.2.0","gulp":"4.0.2","gulp-clean-css":"4.3.0","gulp-concat":"2.6.1","gulp-debug":"4.0.0","gulp-eslint":"6.0.0","gulp-header":"2.0.9","gulp-postcss":"9.0.1","gulp-rename":"2.0.0","gulp-replace":"1.1.3","gulp-sass":"5.0.0","gulp-sourcemaps":"3.0.0","gulp-stylelint":"13.0.0","gulp-terser":"2.1.0","merge-options":"3.0.4","merge-stream":"2.0.0","minimist":"1.2.5","node-sass-glob-importer":"5.3.2","node-sass-package-importer":"5.3.2","nunjucks":"3.2.3","postcss":"8.3.8","postcss-easy-import":"3.0.0","prettier":"2.4.1","rollup":"2.57.0","rollup-plugin-glob-import":"0.5.0","rollup-plugin-node-globals":"1.4.0","sass":"1.42.1","strip-css-comments":"4.1.0","strip-indent":"3.0.0","stylelint":"13.13.1","through2":"4.0.2","undertaker-registry":"1.0.1","util":"0.12.4","vinyl":"2.2.1","vinyl-buffer":"1.0.1","vinyl-fs":"3.0.3","vinyl-source-stream":"2.0.0","path":"0.12.7","gulp-csso":"4.0.1","gulp-notify":"4.0.0","gulp-size":"4.0.1","gulp-uglify":"3.0.2","browser-sync":"2.27.9","gulp-beautify":"3.0.0","gulp-nunjucks-render":"2.2.3","gulp-javascript-obfuscator":"1.1.6","webpack-stream":"7.0.0"},"devDependencies":{"mocha":"9.0.3","should":"13.2.3"},"gitHead":"5efbd4c01c35e288ef9811bb15b4c67fba92496d","_id":"@alotool/bl-pack@0.0.1","_nodeVersion":"16.13.1","_npmVersion":"8.8.0","dist":{"integrity":"sha512-iikY6PCrNCQzOLKWBo9AzEbmgaf47lcnhlQYSss2BAPFdBn5CA7CnOE8nmtLHR79VPXsHOuPKDIegDpx+t3wSQ==","shasum":"6c4bff7be5b77e0aba62c24e3095a6cc800cb635","tarball":"https://registry.npmjs.org/@alotool/bl-pack/-/bl-pack-0.0.1.tgz","fileCount":16,"unpackedSize":53009,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFURYAQD4Umc2EQvaiyWp4Vkdrk8ebSX+ept0/1dh2O4AiEA9Kkw8wi4KpxPADdnM7j2/MYPoFwMb9JKmDKeyHVvjnk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJid2ccACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqwQ/9ESMZNpNECsIz7Gfu+f4bOO3D8u8ZRhQNZKGmTk71weEV3fza\r\n9e55yewyAI4X8TPI3x4BvHiY8/i0isvQrrQphUqWoKBR7wog3O9K0exauCAn\r\nzFcGrQviaQiCpPf+qcHWqPJZoeD5TknbG2TXpmxrAPx1Z9LWhl9cZxD3fv4v\r\no0Vt6YcB7/cAR1ILavW8UOKhWqDHI9DQEZhZlGE5wM6KsMx+/n2JtZ13yFUP\r\nKemsQsBu+Gkw192ZN+33PMp55rPoQpm/0g3btVRmBvrFYPj6A1Bf9wz6YRkZ\r\nXQ+zKQYntqWa8MVwNzAVZHt4ar8DH/1T9ztgW/Pg73KNsaWUN2X4vqB1jwQG\r\npkcsbpK5I5JA7ZhplUolUfSsSTEvkxG1XYmbEceAUBxUURh4mHe4JUtpsAWe\r\nZ+adffsJA0Oms8gCz5n1DERAhp4x1SI1z9+5XqqqKQNnVcW7GhsOPZteD6rm\r\nw0FLTQac4JD4mppA7z4kNyb9gX/+XaaNgLd8xSrmc3hIcnkrYjQPfrxNLFfN\r\npKFo+CBEQ0MNPKjVKuZldYczSw/Y6LJNunafIU8O4K39D7RMvZxV2S9tSup2\r\nJgLAVuVb9loenntJDlQrsmo6NTLr5tKRhmKAII+tdTWRpipKdqAJm/+/Xb0n\r\nK2wl/qaXr7KJG6UqtqjcRbIZxEscQxlZTkM=\r\n=UVTL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alotool","email":"alotool360@gmail.com"},"directories":{},"maintainers":[{"name":"alotool","email":"alotool360@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bl-pack_0.0.1_1651992348665_0.9011593625235403"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-08T06:45:48.591Z","0.0.1":"2022-05-08T06:45:48.918Z","modified":"2022-05-08T06:45:49.048Z"},"maintainers":[{"name":"alotool","email":"alotool360@gmail.com"}],"description":"A tool for develop Blogger theme.","homepage":"https://github.com/alotool/bl-pack/tree/main#readme","keywords":["@alotool","bl-pack","blogger","blogspot"],"repository":{"type":"git","url":"git+https://github.com/alotool/bl-pack.git"},"author":{"name":"alotool","email":"alotool360@gmail.com","url":"https://alotool.github.io"},"bugs":{"url":"https://github.com/alotool/bl-pack/issues"},"license":"MIT","readme":"# BL-PACK\n\n> A tool for develop Blogger theme.\n\n# Getting started\n\n## Features\n\n- [Nunjucks](https://mozilla.github.io/nunjucks/)\n- Sass and ES6+\n- CSS and JS linter\n- CSS and JS minification\n- and more\n\n## Usage\n\nUse [starter themes](https://github.com/alotool/bl-pack/tree/main/starters) for quick start.\n\n## Main folder structure\n\n```text\n.\n├── dist/ (g)\n|   └── theme.xml <---------------------------+\n├── src/                                      |\n|   ├── js/                                   |\n|   |   ├── dist/ (g)                         |\n|   |   |   └── script.js <-------+           |\n|   |   ├── js-in-template/ (g)   |           |\n|   |   └── index.js >------------^           |\n|   ├── sass/                                 |\n|   |   ├── dist/ (g)                         |\n|   |   |   └── style.css <-----------+       |\n|   |   ├── sass-in-template/ (g)     |       |\n|   |   └── index.scss >--------------^       |\n|   ├── skin/                                 |\n|   |   ├── dist/ (g)                         |\n|   |   |   └── style.css <---------------+   |  # (<-) = Compiled\n|   |   ├── skin-in-template/ (g)         |   |  # (>-) = Source\n|   |   └── index.css >-------------------^   |  # (c)  = Config file\n|   └── index.xml >---------------------------^  # (g)  = Auto-generated\n├── .browserslistrc   (c)\n├── .eslintrc.json    (c)\n├── .stylelintrc.json (c)\n├── banner.txt        (c)\n├── data.json         (c)\n└── package.json      (c)\n```\n\n### Index files\n\n- Template: `src/index.xml`\n- Sass: `src/sass/index.scss`\n- Skin: `src/skin/index.css`\n- JS: `src/js/index.js`\n\n### Config files\n\n#### `.browserslistrc`\n\nThe config to share target browsers. Learn more about [Browserslist](https://github.com/browserslist/browserslist).\n\n#### `.eslintrc.json`\n\nThe default config is recommended, but if you want to change the config you can read the [ESLint docs](https://eslint.org/docs/user-guide/configuring).\n\n#### `.stylelintrc.json`\n\nThe default config is recommended, but if you want to change the config you can read the [Stylelint docs](https://stylelint.io/user-guide/configure).\n\n#### `banner.txt`\n\nThe header for compiled Sass, Skin and JS. You can access data from `data.json` using `<%= data.keyName %>`, you can also access data from `package.json` using `<%= pkg.keyName %>`.\n\n#### `data.json`\n\nStore your theme config in this file. This is Nunjucks template context, which means it can be accessed in template using `{{ data.keyName }}`. [Learn more](#template-variables).\n\n#### `package.json`\n\nUse this file to manage and install bl-pack and other packages. You also will need to add [bl-pack commands and tasks](#bl-pack-commands).\n\n## bl-pack commands\n\nDefine bl-pack commands and tasks to build and develop bl-pack theme.\n\nThe commands and tasks are defined in the `scripts` property of `package.json`.\n\n### Basic example\n\npackage.json\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"bl-pack --mode production --watch\",\n    \"build\": \"bl-pack --mode production\"\n  }\n}\n```\n\nYou’ll be able to run:\n\n- `npm start` - Watches the source files and automatically building them whenever you save.\n- `npm run build` - Build the theme.\n\n### Available flags\n\n| Flag | Description |\n| ---- | ----------- |\n| `--mode` | `production` or `development` (no minification) |\n| `--no-sass` | Exclude Sass from compilation. |\n| `--no-sass-lint` | Disable Sass linter. |\n| `--no-skin` | Exclude Skin from compilation. |\n| `--no-skin-lint` | Disable Skin linter. |\n| `--no-js` | Exclude JS from compilation. |\n| `--no-js-lint` | Disable JS linter. |\n| `--watch` | Watches the source files and automatically building them whenever you save. |\n| `--gulpfile` | Custom gulpfile. |\n| `--cwd` | Custom CWD. |\n\n# Concepts\n\n## Template\n\nWe uses [Nunjucks](https://mozilla.github.io/nunjucks/templating.html) for its template engine. File extension for template files is `.xml`.\n\n### Source\n\n- Index file: `src/index.xml`\n- Compiled to: `dist/theme.xml`\n\n### Paths\n\n- `./example.xml` - Relative to file's directory.\n- `../example.xml` - Relative to file's parent directory.\n- `example.xml` - Relative to the `index.xml` directory.\n\n### `<bp:template>` tag\n\nWrap the markup with `<bp:template>` tag in `.xml` files.\n\n```njk\n<bp:template>\n  <p>example</p>\n</bp:template>\n```\n\nNote: The `<bp:template>` tag is always required.\n\n### `template` tag\n\n**Do not use** the default Nunjucks `{% include %}` tag, use `{% template %}` tag instead.\n\nsrc/example-dir/example.xml:\n\n```njk\n<bp:template>\n  <div>\n    <p>example</p>\n  </div>\n</bp:template>\n```\n\nsrc/index.xml:\n\n```njk\n<bp:template>\n  <div>\n    {% template \"./example-dir/example.xml\" %}\n  </div>\n</bp:template>\n```\n\nOutput:\n\n```html\n<div>\n  <div>\n    <p>example</p>\n  </div>\n</div>\n```\n\n##### Including template from node modules\n\nYou can also include template from node modules:\n\n```njk\n<bp:template>\n  {% template \"package-name/path/to/file.xml\" %}\n</bp:template>\n```\n\nLearn how to create plugin for bl-pack by reading [this section](#creating-plugins) below.\n\n### `asset` tag\n\nUse `{% asset %}` tag to include compiled [Sass](#sass), [Skin](#skin), [JS](#js), and other CSS and JS assets.\n\nNote: You must use the `{% asset %}` tag to prevent assets from being prettied.\n\n#### Usage example\n\n```njk\n{% asset %}\n  <style>\n  .element {\n    display: block;\n  }\n  </style>\n{% endasset %}\n```\n\nWith files:\n\n```njk\n{% asset %}\n  <style>\n  {% asset \"./path/to/file1.css\" %}\n  {% asset \"./path/to/file2.css\" %}\n  </style>\n{% endasset %}\n```\n\n#### Examples\n\nNormal CSS:\n\n```njk\n{% asset %}\n  <b:if cond='!data:view.isLayoutMode'>\n  <style>\n  {% asset \"./sass/dist/style.css\" %}\n  </style>\n  </b:if>\n{% endasset %}\n```\n\nSkin CSS:\n\n```njk\n{% asset %}\n  <b:if cond='!data:view.isLayoutMode'>\n  <b:skin>\n  <![CDATA[\n  {% asset \"./skin/dist/style.css\" %}\n  ]]>\n  </b:skin>\n  </b:if>\n{% endasset %}\n```\n\nLayout Mode CSS:\n\n```njk\n{% asset %}\n  <b:if cond='data:view.isLayoutMode'>\n  <b:template-skin>\n  <![CDATA[\n  body#layout {}\n  ]]>\n  </b:template-skin>\n  </b:if>\n{% endasset %}\n```\n\nJS:\n\n```njk\n{% asset %}\n  <script>\n  //<![CDATA[\n  {% asset \"./js/dist/script.js\" %}\n  //]]>\n  </script>\n{% endasset %}\n```\n\n#### Including assets from node modules\n\nYou can also include assets from node modules:\n\n```njk\n{% asset %}\n  <b:if cond='!data:view.isLayoutMode'>\n  <style>\n  {% asset \"package-name/path/to/file.css\" %}\n  </style>\n  </b:if>\n{% endasset %}\n```\n\n### `extends` tag\n\nUse Nunjucks `{% extends %}` tag. See [Nunjucks template inheritance](https://mozilla.github.io/nunjucks/templating.html#template-inheritance).\n\nsrc/base.xml:\n\n```njk\n<bp:template>\n  <header>\n    {% block header %}{% endblock %}\n  </header>\n\n  <main>\n    {% block main %}{% endblock %}\n  </main>\n\n  <footer>\n    {% block footer %}{% endblock %}\n  </footer>\n</bp:template>\n```\n\nsrc/index.xml:\n\n```njk\n<bp:template>\n  {% extends \"./base.xml\" %}\n\n  {% block header %}\n  This is header content.\n  {% endblock %}\n\n  {% block main %}\n  This is main content.\n  {% endblock %}\n\n  {% block footer %}\n  This is footer content.\n  {% endblock %}\n</bp:template>\n```\n\nOutput:\n\n```html\n<header>\n  This is header content.\n</header>\n\n<main>\n  This is main content.\n</main>\n\n<footer>\n  This is footer content.\n</footer>\n```\n\n### Variables\n\nYou can use variables from [`data.json`](#datajson) using `{{ data.keyName }}` and you can also use variables from [`package.json`](#packagejson) using `{{ pkg.keyName }}`.\n\n##### Example\n\ndata.json:\n\n```json\n{\n  \"myVar\": \"Value of myVar\"\n}\n```\n\npackage.json:\n\n```json\n{\n  \"name\": \"my-awesome-theme\"\n}\n```\n\nfile.xml:\n\n```njk\n<bp:template>\n  <p>{{ data.myVar }}</p>\n  <p>{{ pkg.name }}</p>\n</bp:template>\n```\n\nOutput:\n\n```html\n<p>Value of myVar</p>\n<p>my-awesome-theme</p>\n```","readmeFilename":"README.md"}