# jach

> jach

Latest version **0.0.2** (published 2021-01-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install jach
pnpm add jach
yarn add jach
bun add jach
```

Provides the command `jach`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2021-01-08 |
| First published | 2021-01-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 18 |
| Unpacked size | 17.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jachin |
| Maintainers | jachin_927 |

## Links

- npm: https://www.npmjs.com/package/jach
- npm.io page: https://npm.io/package/jach

## Dependencies (18)

- [gulp](https://npm.io/package/gulp.md) ^4.0.2
- [gulp-if](https://npm.io/package/gulp-if.md) ^3.0.0
- [gulp-rev](https://npm.io/package/gulp-rev.md) ^9.0.0
- [commander](https://npm.io/package/commander.md) ^6.2.0
- [gulp-less](https://npm.io/package/gulp-less.md) ^4.0.1
- [gulp-sass](https://npm.io/package/gulp-sass.md) ^4.1.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.3
- [gulp-babel](https://npm.io/package/gulp-babel.md) ^7.0.1
- [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^3.0.2
- [browser-sync](https://npm.io/package/browser-sync.md) ^2.26.12
- [gulp-htmlmin](https://npm.io/package/gulp-htmlmin.md) ^5.0.1
- [gulp-replace](https://npm.io/package/gulp-replace.md) ^1.0.0
- [gulp-minify-css](https://npm.io/package/gulp-minify-css.md) ^1.2.4
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [gulp-autoprefixer](https://npm.io/package/gulp-autoprefixer.md) ^7.0.1
- [gulp-file-include](https://npm.io/package/gulp-file-include.md) ^2.2.2
- [gulp-load-plugins](https://npm.io/package/gulp-load-plugins.md) ^2.0.3
- [gulp-rev-collector](https://npm.io/package/gulp-rev-collector.md) ^1.3.1

## Recent versions

- 0.0.2 (latest) — 2021-01-08

## README

Jach
===========================
jach 基于 Browsersync 和 gulp 开发, 集成了前端调试, 构建, 编译等开发流程, 帮助开发者提高开发效率;


##命令步骤
1. npm i jach -g    // 全局安装依赖

2. jach init    // 项目初始化

3. jach serve   // 运行项目

4. jach build   // 打包静态文件


##目录结构描述

```javascript

├── app                         // 入口文件夹
│   ├── css                     // 样式文件夹
│   │    └── vendor
│   ├── font                    // 字体文件夹
│   ├── images                  // 图片文件夹
│   ├── js                      // 脚本文件夹
│   │    └── vendor
│   ├── media                   // 多媒体文件夹
│   └── template                // 模板文件夹
│
└── config.js                   // 自定义配置文件

```

##注意事项说明

1. 执行 jach init 命令时, 如果没有 app 文件夹，则会默认创建

2. config.js 为编译配置文件

3. css, js 文件夹下的 vendor 文件夹 build 时不会进行处理, 建议将外来引用的 css, js 放入 vendor , 如引入的 jQuery 源文件, 放到对应 js/vendor 下;

4. 样式文件可使用 less, scss 扩展语言, 插件会自动编译此扩展语言

5. template 文件夹为模板文件夹, 可将页面通用的模板如header, footer 放到此处, 打包时将会忽略此文件夹

6. 模板引入的命令为
  ```javascript
    // 基本命令行
    @@include("./template/head.html")

    // 带参命令行
    @@include("./template/head.html", {
			"page": "index"
    })
  ```

  根据携带参数添加 class
  ```javascript

    // index.html
    @@include("./template/head.html", {
			"page": "index"
    })

    // 模板文件 head.html
    <div class="menu @@page">
    ...
    </div>

    <div class="menu @@if (page === 'index') {active}">
    ...
    </div>
  ```
  编译后
  ```javascript

    // 模板文件 head.html
    <div class="menu index">
    ...
    </div>

    <div class="menu active">
    ...
    </div>
  ```

  **更多详情可参考 [gulp-file-include](https://www.npmjs.com/package/gulp-include-file) 介绍**

  #### 注意！参数必须用双引号包裹, 否则报错

  ##### 正确写法
  **`"page": "index"`**
  
  ##### 错误写法
  **`'page': 'index'`**

  **` page: index`**

---
_Source: https://npm.io/package/jach · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._