bag-tool
v1.0.7
Published
A tool just for bag
Downloads
32
Maintainers
Readme
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
.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 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-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>