Bespoke.js 生成器使用指南

Bespoke.js 生成器使用指南

generator-bespokeCreate Bespoke.js presentations using Yeoman.项目地址:https://gitcode.com/gh_mirrors/ge/generator-bespoke

1. 项目的目录结构及介绍

在克隆并初始化 generator-bespoke 项目后，你将看到以下目录结构：

presentation-hello-world/
├── app/
│   ├── scripts/
│   ├── styles/
│   ├── templates/
│   └── index.html
├── gulpfile.js
├── package.json
└── README.md

• app/: 包含演示文稿的主要内容，包括脚本、样式和模板。
  • scripts/: 存放 JavaScript 文件。
  • styles/: 存放 CSS 或 Stylus 文件。
  • templates/: 存放模板文件，如 Pug 或 AsciiDoc。
  • index.html: 主 HTML 文件。
• gulpfile.js: Gulp 任务配置文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 gulpfile.js 和 index.html。

• gulpfile.js: 这个文件定义了项目的构建任务，包括编译、服务器启动等。你可以使用以下命令启动本地服务器：

  npx gulp serve
  

• index.html: 这是演示文稿的主页面，包含了 Bespoke.js 的基本结构和初始化代码。

3. 项目的配置文件介绍

主要的配置文件是 package.json 和 gulpfile.js。

• package.json: 这个文件包含了项目的元数据和依赖项。你可以在这里找到项目的名称、版本、作者、依赖库等信息。此外，它还定义了一些脚本命令，如 start 和 build。

  {
    "name": "presentation-hello-world",
    "version": "1.0.0",
    "description": "A Bespoke.js presentation",
    "main": "index.html",
    "scripts": {
      "start": "gulp serve",
      "build": "gulp build"
    },
    "dependencies": {
      "bespoke": "^1.0.0",
      "bespoke-classes": "^1.0.0",
      "bespoke-nav": "^1.0.0",
      "bespoke-scale": "^1.0.0",
      "bespoke-fullscreen": "^1.0.0",
      "bespoke-overview": "^1.0.0",
      "bespoke-bullets": "^1.0.0",
      "bespoke-hash": "^1.0.0",
      "bespoke-extern": "^1.0.0"
    },
    "devDependencies": {
      "gulp": "^4.0.0",
      "gulp-stylus": "^2.7.0",
      "gulp-pug": "^4.0.1",
      "gulp-serve": "^1.4.0"
    }
  }
  

• gulpfile.js: 这个文件定义了 Gulp 任务，包括编译 Stylus 和 Pug 文件、启动本地服务器等。

  const gulp = require('gulp');
  const stylus = require('gulp-stylus');
  const pug = require('gulp-pug');
  const serve = require('gulp-serve');
  
  gulp.task('styles', () => {
    return gulp.src('app/styles/*.styl')
      .pipe(stylus())
      .pipe(gulp.dest('dist/styles'));
  });
  
  gulp.task('templates', () => {
    return gulp.src('app/templates/*.pug')
      .pipe(pug())
      .pipe(gulp.dest('dist/templates'));
  });
  
  gulp.task('serve', serve({
    root: ['dist'],
    port: 8000
  }));
  
  gulp.task('default', gulp.series('styles', 'templates', 'serve'));
  

通过以上介绍，你应该对 generator-bespoke 项目的目录结构、启动文件和配置文件有了基本的了解。希望这能帮助你更好地使用和定制你的 Bespoke.js 演示文稿。

generator-bespokeCreate Bespoke.js presentations using Yeoman.项目地址:https://gitcode.com/gh_mirrors/ge/generator-bespoke