✔简单的入门项目,可以更快地提供项目和/或:
- GitHub页面的自动部署
- 发布发行到GitHub
这提供了一个示例项目,该项目可以自动使用GULP自动化任务,包括:
该项目需要满足一些要求才能进行编译。
为了开始使用该项目,您需要使用GIT命令将其克隆到PC上,请用您的项目名称替换[your-project] :
git clone https://github.com/adorade/startit.git [your-project]导航到文件夹:
cd [your-project]安装依赖项:
yarn install请注意,已修复模块版本以确保兼容性。运行yarn outdated并更新package.json 。
要开始使用它,您唯一需要做的就是在选择和代码的代码编辑器上打开项目。要编译和实时预览您的所有更改,您拥有一些可以帮助您的命令。这是您应该知道的命令列表。
每个命令都必须使用GULP命令(例如gulp cleaner或gulp build在项目的根目录上执行:
| 任务 | 描述 |
|---|---|
| 清洁工 | 删除所有编译的文件 |
| Linter | 皮棉样式,脚本和哈巴狗文件 |
| 样式 | 编译Sass样式 |
| 脚本 | 编译JavaScript文件 |
| 字体 | 复制字体 |
| 静态 | 复制静态文件 |
| 图像 | 优化图像 |
| 页面 | 编译哈巴狗模板 |
| 服务 | 启动服务器并注意任何更改 |
| 建造 | 建立项目 |
| 开发 | 编译并注意更改 |
| 部署 | 将文件部署到github页面 |
| 发布 | 发布发行到GitHub |
| 默认 | 默认GULP任务 |
| 检查 | 检查Gulp配置 |
| 帮助 | 打印帮助消息 |
运行gulp --tasks以查看所有可用的Gulp任务。
如果您正在开发,那么gulp dev命令是您的最佳选择。转到控制台中的项目文件夹,并执行gulp dev ,它将编译项目并启动每次更改代码中的内容时都会刷新的服务器。
Gulp将关注变化,并将告诉您如何从本地和公共URL访问该项目。
指向该URL的每个浏览器都会自动刷新。作为测试目的的额外功能,一个浏览器上的任何交互都会反映在其他任何浏览器上。同时在手机,平板电脑和PC上尝试一下。
该项目具有非常简单且灵活的结构。如果需要移动任何文件或目录的默认位置,请确保更新到tool/util/config.js文件上的新位置。
├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src - > Source files for the project
│ ├── es6 - > Scripts
│ ├── fonts - > Fonts
│ ├── images - > Images
│ ├── scss - > Sass
│ ├── static - > Favicons...
│ ├── vendors - > Vendors folder for all the dependencies
│ └── views - > Templates directory for Pug files
├── test - > Tests Files
├── tmp - > All the compiled files will be placed here (Development)
├── tools - > Project tools and configuration
│ ├── build - > files for build
│ ├── tasks - > tasks files for gulp
│ └── util - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md - > README
└── ... config files for packages当项目编译时,不同任务将自动生成dist和tmp文件夹中的所有文件。请确保不要在这些文件夹中手动修改任何文件,因为将在编译过程中替换更改。
该项目具有一些不错的配置选项,可以满足您所有需求。要配置您需要编辑以下文件并更改所需的任何值:
tool/util/banner.js脚本和样式文件的横幅tool/util/config.js项目配置tool/util/options.js插件的选项每次进行更改后,请检查gulp checks是否有订单,没有错误。
该配置的每个方面都在文件中描述,以便您知道选项。
以实时加载开发模式运行:
yarn run start
# or
gulp
# or
gulp dev导航到http://localhost:1234/或从另一个设备访问的External URL。
查找任务的完整列表:
gulp -T
# or
gulp -T --tasks-depth 0将NODE_ENV设置为production ,以便GULP任务产生最终代码,即缩小文件,并禁用Sourcemap生成。
yarn run build
# or
gulp build --production根据您的操作系统将NODE_ENV设置为手动production :
Linux/Mac OS:
NODE_ENV=production
gulp build (或Inline NODE_ENV=production gulp build )
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildWindows Legacy命令行:
set NODE_ENV = production
gulp build要自动将您的项目部署到github页面,并在https://[your-username].github.io/[your-project-name]中提供。
yarn run deploy
# or
gulp build --production && gulp deploy发布发布到github使用:
yarn run release
# or
gulp release该项目已根据麻省理工学院许可证