wishbao
v3.3.4
Published
This project is to nuts gulp workflow.
Downloads
10
Readme
Nuts 前端构建工具
这是一个基于 gulp#4.x 的前端工程构建集合,包括了最常见的新建项目,开发项目和最后的编译发布项目。其中 JavaScript 支持 ES2015 的语法,CSS 部分采用 SCSS。
新建项目目录结构说明。
--- dist 这个目录是线上编译出来的代码,属于最终用户访问的代码。
--- 源码目录中对应的最终代码目录,仅仅只放html文件
--- static 放置静态文件的地方,真实环境中为CDN的目录地址
--- dev 开发模式下的目标文件夹。
--- src 源代码目录,所有的源代码都放在这里
--- nuts.config.json 配置文件
--- package.json 项目的依赖说明文件,可用于初始化项目和安装依赖包
工具安装
初始化的时候执行以下命令安装必要的依赖
- nodejs运行环境
- node >= 6.6.0 npm >= 3.10.3
$ npm install -g n
$ n stable
- 通过 npm 进行安装
$ npm install -g wishbao
Nuts 文档
初始化项目:
// 如果需要更新配置文件则需要添加 --update 参数
$ nuts init [--update]
新建项目:
// 新建项目支持下划线的命名方式, 项目会按照驼峰命名的方式进行下划线的转换
$ nuts create --name <项目名称>
开发项目:
$ nuts dev --name <项目名称> [--port <端口号>]
清除缓存:
$ nuts clean
编译项目:
// 如果需要编译出指定版本请在后面添加 --ver 参数
$ nuts build --dir <项目名称> [--ver <指定版本号>]
导入静态资源:
$ nuts include --name <项目名称>
命令说明:
- 安装之后修改配置文件之后就可以通过 create 命令来创建新的项目了。
- 项目默认监听端口号2333,在浏览器中打开 http://localhost:2333 即可看到当前项目页面,如果端口号冲突或者同时启动多个项目则在 dev 命令后面添加 --port 参数来动态修改端口号。
- 关于具体配置的内容,请查看配置文件中的说明。
配置文件说明:
{
// 本地开发服务器监听的端口号
"serverPort": 2333,
// 开发环境中的源码路径
"sourceDir": "src",
// 需要部署的目标路径
"distDir": "dist",
// 目标路径中静态文件需要放置的目录
"staticDir": "static",
// 开发环境中需要开发的项目名称
"name": "example",
// 项目作者
"author": "jonnyf",
// 开发时的编译目录
"devDir": "dev",
// 编译是否需要添加 cdn
"needCDN": true,
// 默认的CDN路径
"staticURL": "http://cdn.jonnyf.com/images",
// 代码中的字符串替换内容
"replaceStr": 666,
// html 文件的 title
"title": "exampleTitle",
// 样式预编译支持版本
"styleType": "css",
// JavaScript 版本
"target": "ES6",
// 静态资源转 base64
"base64": false,
// 引入的 sass 库,默认采用了 nuts-scss 库,使用时需要先安装。传入的值需要是一个数组。
// 'sassLib': []
"sassLib": ["nuts-scss"]
}
关于 CDN:
cdn 根目录的子目录 cdn_dir/指向dist/static/
* cdn 项目中包含的图片,字体,css和js文件都会部署到 CDN 目录中。
* cdn 更新通过发布新版本进行更新。
* 项目中的html文件不在缓存中!
* 例子:http://cdn.jonyf.com/cdn_dir/test/1.1.1/css/test.css