什么是 roots
roots 是一个静态站点生成器，它可以帮助前端开发者轻松地创建静态页面，它提供了一系列的工具和组件，包括预处理器、压缩器、自动化工具、路由管理器等等。而且，roots 是一个基于 npm 的包。这使得它非常容易安装和使用。
如何安装和使用 roots
在使用 roots 之前，我们需要先安装它。在你的终端中输入：
npm install -g roots
安装完毕后，我们就可以开始创建一个新的 roots 项目了。进入到目标文件夹，然后执行：
roots new myproject
这将会创建一个名为 myproject 的新项目，并在其中包含一些必要的文件和目录。接下来，我们需要进入到这个项目中，并启动它。我们可以通过如下的命令实现：
cd myproject roots watch
这将会启动一个本地服务器，并将我们的项目展示在你的默认浏览器中。现在，你可以在浏览器中看到我们的 roots 项目的主页了。
基本项目结构
在上述步骤中，我们创建了一个名为 myproject 的 roots 项目。默认情况下，这个项目的目录结构如下：
myproject/ |--app.coffee |--public/ | `--favicon.png |--views/ | `--index.jade `--package.json
app.coffee 是 roots 的配置文件，通过修改这个文件，我们可以更改、添加和删除项目中的一些配置选项，这样就能够调整项目的行为和快速地定制项目。
public 目录中包含项目的所有公共资产。这里包含了所有的 JavaScript 和 CSS 文件、图像、字体、视频等等。
views 目录中包含所有的模板文件。roots 支持各种模板引擎，包括 Jade、EJS、Handlebars 等等。在这里，我们可以编写项目的各个页面，使用模板引擎来生成静态页面。
package.json 是我们的项目的元数据文件，包含了项目的名称、版本、作者、依赖等等，它还能帮我们实现自动化管理。
如何生成静态页面
只要我们创建了 roots 项目，我们就可以使用它来生成静态页面。在我们的 roots 项目目录中，执行以下命令：
roots compile
这将生成一个 public 目录，其中包含有您的项目的所有静态资源。如果要运行在本地服务器中，请使用以下命令：
roots watch
这将监视你的 roots 项目的任何更改，并自动重新编译它。现在，你就可以在浏览器中查看它了。
如何使用组件
roots 提供了一些内置组件来简化您的开发工作，比如自动化压缩、浏览器同步、CSS 后处理器等等。要开始使用这些组件，我们需要在 app.coffee 中添加组件的名称。
以下是roots的一些示例组件:
js
这是 roots 内置的一个 JavaScript 压缩器。在你的 app.coffee 中加入这一项：
js: minify
然后我们需要告诉 roots 哪些 js 文件需要被压缩。在 public 目录下创建一个 scripts 目录，然后在其中创建一个名为 main.js 的文件。接下来，在你的 views/index.jade 文件中引入这个文件：
script(src='./scripts/main.js')
这样一来，roots 就会自动为你打包并压缩你的 JavaScript 文件了。
autoprefixer
这是 roots 的一个自动 CSS 前缀器，在你的 app.coffee 中加入下面这一项即可：
css: autoprefixer, minify
roots 的 autoprefixer 会自动为您添加浏览器前缀，让您的 CSS 更兼容跨越各个浏览器。
browsersync
这是 roots 自带的一个浏览器同步组件。在你的 app.coffee 中加入下面这一项：
browserSync: true
这样一来，roots 就会自动同步您的浏览器，在您的开发过程中非常便利。如果你需要自定义它，你可以在 app.coffee 中修改以下项：
browserSync: port: 8888 browser: 'google chrome' files: ['./public/**/*']
总结
roots 是一个功能强大的静态站点生成器，它可以帮助前端开发者快速、轻松地创建静态站点。在这篇文章中，我们介绍了如何安装和使用 roots，并向您介绍了 roots 的一些基本组件。在您掌握这些技能之后，您将能够用最高效的方式构建出一个强大的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76127