2

在您选择需要包含的模块后，jquery.ui 或modernizr 如何即时生成代码？像https://npmjs.org/package/assemble或 nodejs 或 PHP 这样的插件是不是很烦？我已经阅读了 jquery.ui 切换到节点的下载构建器。我想建立类似的东西。

我有 html 模板，每次用户生成模板时都需要不同的 css 颜色或 javascript 组件。因此，在我的情况下，使用复选框 os 形成完美，就像 jqueryui 或modernizr 一样。

任何帮助表示赞赏。

4

1 回答 1

1

我是assemble的核心团队，首先，Assemble 只是另一个 Grunt.js 插件，我们只是试图通过利用 Grunt 来简化构建组件和站点 - 因为它是一个非常棒的构建系统。

我们创建 Assemble 的原因是为了与您所描述的类似的用例。作为程序员，我们总是阅读有关保持数据、结构、样式等分离的最佳实践。理论上，这听起来不错，但实际上我们找不到任何工具来帮助我们以这种方式维护代码。

我们确实找到了我们欣赏的工具，比如 YUI 和 jQuery UI，它们都提供了强大而有趣的方式来处理模块化、可重用的代码。但是我们决定构建 Assemble，因为我们希望灵活地使用手头工作所需的任何模板框架或数据格式。

因此，您可以使用 Assemble 构建示例 UI 组件：

  • 该组件将是一个简单的引导警报
  • 模板语言是 Handlebars
  • 数据格式是 JSON，但我们可以选择使用 YAML 或 YAML Front-matter
  • 我在示例中使用的变量是任意的，随意设置

模板：alert.hbs

<div class="alert {{ alert.modifier }}">
  <strong> {{ alert.strong }} </strong> {{ alert.message }} 
</div>

数据：alert.json

{
  "strong": "This is an alert",
  "modifier": "alert-info",
  "message": "This alert was assembled from a Handlebars partial and JSON data"
}

在实际assemble任务中，您可以通过多种方式构建模板，但假设您想将一堆组件（如警报）构建到单独的文档页面中：

// Project configuration.
grunt.initConfig({
  assemble: {
    options: {
      // built-in variable for resolving relative path to specified folder
      assets: 'dist/assets',
      // "layout" to wrap pages with header and/or footer
      layout: 'src/layouts/default.hbs',
      data: 'src/data/*.{json,yml}'
    },
    pages: {
      files: {
        // This is where "pages" are usually defined, but here we're pointing 
        // to the partials folder to build them into pages for documentation.
        'dist/': ['src/partials/*.hbs'],
      }        
    }
  }
});

更进一步，您可以轻松地将变量添加到 JSON 文件或部分中的 YAML 前端，以指定要用于组件的样式表。

于 2013-05-04T23:13:52.190 回答