English | 简体中文
This is a tool designed for the pain of a front-end development program when writing code.
- Layout: You can write duplicate code in the layout file (default supports
.htmland.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 afterctrl+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.
npm install -g bag-toolRun bag-tool <command> in your projoct. Bag-tool support these <command>:
-vView bag-tool version.helpGet docs.initInit your src-dir and config-file.cleanClear dest-dir.buildCompile your src-dir to dest-dir.startBuild once, open your browser and load, then watch your src-dir to live-reload.exportPack your dest-dir and compress it by zip, support--outputattribute to specify the path of the output file.
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 initType: String
Default: "src/"
Project src-dir.
Type: String
Default: "dist/"
Project dest-dir.
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.
Type: Array
Default: ["*.html", "*.tpl"]
Supported layout file extnames.
Type: Array
Default: ["less"]
The enabled css preprocessor, supports less and sass.
Type: Boolean
Default: true
Whether to enable liveReload function.
Type: String
Default: "index.html"
The path that is loaded by default after the local service is turned on.
Type: String
Default: "utf8"
Character set encoding.
Type: Boolean
Default: true
Whether to display detailed logs.
Type: Array
Default: []
File whitelist, the files in the whitelist will not be complied, directly copied to dest, the path relative to src.
Type: Array
Default: ["**/.DS_Store"]
Ignored file or directory, the path relative to src. Support node-glob.
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.
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>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>