generator infinitely static

无限静态

这是一个静态页面生成器，具有基本的路由支持。该工具背后的想法是利用最好的 Webpack 和相关工具来简化静态网页的开发。

包括什么？

• 具有合理默认值的 Linting 工具 - stylelint 和 eslint
• 开发中的热重载
• 激活了 env 预设的 Babel 也可以处理 polyfills
• JavaScript 缩小和死代码删除
• SASS 编译、前缀和缩小
• 用于管理媒体断点的库（media-blender）
• Handlebars 作为模板语言（带有帮助器、布局和部分）
• 支持路线（平面和嵌套构建结构）

入门

运行这个非常简单。您需要安装这个yo器。

npm install -g yo generator-infinitely-static
mkdir my-project
cd my-project
git init
yo infinitely-static

注意：项目初始化后运行npm install husky --save-dev 。

发展

当 Yeoman 完成后，您就有了一个工作项目。

运行热重载服务器

 npm start

生产构建

 npm run build

路线

添加路线也很简单。在项目的根目录中，您将找到routes.json ，其中包含初始index路由。路由配置还支持嵌套和模板数据。

 {
  "index" : { // points to the template file in app/templates/pages/index.hbs
    "route" : "/" , // don't forget the trailing slash
    "context" : { // data that you can use in the page
      "user" : {
        "name" : "Super user"
      }
    }
  } ,
  "contact" : {
    "route" : "contact/me/" // will generate nested routes
    }
  }
}

之后，在您的模板中，您可以使用包含的{{linkTo}}帮助程序，如下所示：

 < a href =" {{linkTo 'index'}} " > Home </ a >

对于用户数据，您可以使用getDataAsString帮助器：

 < h1 > {{getDataAsString 'user.name'}} </ h1 >

如果数据很简单（数组、字符串、数字等），它将照常显示，但如果引用对象，您将获得字符串化的 JSON。但是，请记住，可以使用模板中的htmlWebpackPlugin.options对象直接访问数据：

 < h1 > {{htmlWebpackPlugin.options.context.user.name}} </ h1 >

这样您就可以使用内置帮助程序迭代上下文中指定的数组。

执照

麻省理工学院许可证

© 2016 润飞联公司