这是一个基于 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
// 如果需要更新配置文件则需要添加 --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_dir/指向dist/static/
* cdn 项目中包含的图片,字体,css和js文件都会部署到 CDN 目录中。
* cdn 更新通过发布新版本进行更新。
* 项目中的html文件不在缓存中!
* 例子:http://cdn.jonyf.com/cdn_dir/test/1.1.1/css/test.css