bag-tool
v1.0.7
Published
A tool just for bag
Downloads
2
Maintainers
jaminqianReadme
English | 简体中文
bag-tool
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
.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.
Install
npm install -g bag-toolUsage
Run 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.
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 initConfig 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>