npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bag-tool

v1.0.7

Published

A tool just for bag

Downloads

32

Readme

English | 简体中文

bag-tool

NPM version Downloads

This is a tool designed for the pain of a front-end development program when writing code.

Features

  • Layout: You can write duplicate code in the layout file (default supports .html and .tpl, which you can modify in the configuration to support more extname) and then import it in the main file;
  • CSS-compile: You can write less or sass according to your preferences, then bag-tool will help you compile very easily;
  • Babel-compile: Feel free to write es6, bag-tool will help you compile es6 into es5 through babel;
  • Live-reload: Don't waste time on F5, just enjoy the pleasure of the browser automatically refreshing after ctrl+s;
  • Import tpl and style files: Bag-tool will compile the tpl and style files you reference into js files, you can directly get the string of tpl or inject the style into the <title>;
  • If you have the function you want, just contact me or open an issue.

Install

npm install -g bag-tool

Usage

Run bag-tool <command> in your projoct. Bag-tool support these <command>:

  • -v View bag-tool version.
  • help Get docs.
  • init Init your src-dir and config-file.
  • clean Clear dest-dir.
  • build Compile your src-dir to dest-dir.
  • start Build once, open your browser and load, then watch your src-dir to live-reload.
  • export Pack your dest-dir and compress it by zip, support --output attribute to specify the path of the output file.

Config

The default configuration can refer to the src/config.json file.

Of course, you can rewrite it by the bag-tool-config.json file in your project(When you run bag-tool init, bag-tool will create bag-tool-config.json file. Or you can create it manually). Note: Configuration must conform to the JSON specification.

cd your-path
vi bag-tool-config.json

# or

cd your-path
bag-tool init

Config item

src

Type: String

Default: "src/"

Project src-dir.

dest

Type: String

Default: "dist/"

Project dest-dir.

template

Type: String

Default: "template/"

Layout-dir, its path relative to src. All layout files must be in the layout-dir and do not support references to files other than the layout-dir. The layout-dir will not be output to dest.

tmplExtname

Type: Array

Default: ["*.html", "*.tpl"]

Supported layout file extnames.

cssEngine

Type: Array

Default: ["less"]

The enabled css preprocessor, supports less and sass.

liveReload

Type: Boolean

Default: true

Whether to enable liveReload function.

startPath

Type: String

Default: "index.html"

The path that is loaded by default after the local service is turned on.

encoding

Type: String

Default: "utf8"

Character set encoding.

showDetailLog

Type: Boolean

Default: true

Whether to display detailed logs.

whiteList

Type: Array

Default: []

File whitelist, the files in the whitelist will not be complied, directly copied to dest, the path relative to src.

ignore

Type: Array

Default: ["**/.DS_Store"]

Ignored file or directory, the path relative to src. Support node-glob.

Layout

Import

Use <bag-include file="path/file.html"></bag-include> to import layout file path/file.html, the file attr relative to the layout-dir. Note: The layout file must be in the layout-dir.

<!-- src/template/head.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bag-tool test</title>
</head>
<body>


<!-- src/template/foot.html -->
</body>
</html>


<!-- src/index.html -->
<bag-include file="head.html"></bag-include>
  <p>hello world</p>
<bag-include file="foot.html"></bag-include>

After compilation

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bag-tool test</title>
</head>
<body>
  <p>hello world</p>
</body>
</html>

Of course, you can also import other layout files in the layout file. Note: The path is still relative to the layout-dir.

Module import

In the layout file, use <%#partName%><%#/partName%> to divide it into modules, and part is the id of each module. This id can be used to specify the module content.

<!-- src/template/content.html -->
<%#title%>
  <h1>This is a title.</h1>
<%#/title%>

<%#nav%>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
<%#/nav%>

Use <bag-include file="path/file.html" part="partName"></bag-include> to import the contents of the partName module of the layout file path/file.html.

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bag-tool test</title>
</head>
<body>
  <bag-include file="content.html" part="title"></bag-include>
  <p>hello world</p>
  <bag-include file="content.html" part="nav"></bag-include>
</body>
</html>

After compilation

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bag-tool test</title>
</head>
<body>

  <h1>This is a title.</h1>

  <p>hello world</p>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

</body>
</html>

Slot

Use <%$slotName%><%$/slotName%> in the layout file to set up a code injection port where you can set the default content and inject the default content when there is no code injection.

<!-- src/template/layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%$title%><%$/title%></title>
  <%$link%><link rel="stylesheet" type="text/css" href="default.css"><%$/link%>
</head>
<body>
  <%$body%><%$/body%>
</body>
</html>

Use <bag-slot name="slotName"></bag-slot> to inject the code, <bag-slot> must be written in <bag-include>.

<!-- src/index.html -->
<bag-include file="layout.html">
  <bag-slot name="title">bag-tool test</bag-slot>
  <bag-slot name="body">
    <p>hello world</p>
  </bag-slot>
</bag-include>

After compilation

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bag-tool test</title>
  <link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
  <p>hello world</p>
</body>
</html>