Grunt 项目推荐的目录结构是啥

Posted 2023-03-07

【中文标题】Grunt 项目推荐的目录结构是啥

【英文标题】：What is the recommended directory structure for Grunt projectsGrunt 项目推荐的目录结构是什么

【发布时间】：2012-12-18 23:30:41

【问题描述】：

我是第一次设置 Grunt 项目。有推荐的目录结构吗？例如，将源代码保存在 /src 下，将中间构建工件保存在 /stage 中，将最终连接的、缩小的工件保存在 /dist 中。

我也在使用指南针/sass。我假设我的 scss 文件应该放在 /src 下，但是设置构建工作流程的正确方法是什么，以便我可以快速构建和测试，同时不会让我的源目录与构建工件混淆。

【参考方案1】：

我只有 /src 和 /build（这是你的 /dist），没有 /stage。我还没有发现真正需要舞台，可能是因为我没有太多的集成测试要做。让我知道您使用 /stage 的目的——我很好奇。 :)

/myproject
  /build
  /src
    /css
    /sass

我确实有 /sass 和 /css。 /css 保存使用 SASS 编译的单个 main.css。在我的 Gruntfile.js 中，我有 2 个 SASS 目标，sass:dev 和 sass:build。 sass:dev 编译成 /src/css 和 sass:build 成 /build/css。 /src/css/main.css 是 git-/svn-ignored。

归根结底，Grunt 并不关心您如何组织资源。它只是假设 Gruntfile.js 和 /node_modules 位于项目根目录，仅此而已。实际上是 NPM 假定 package.json 位于根目录。

因此，请尝试不同的结构并选择您喜欢的结构，这始终取决于您使用的工具。

希望这会有所帮助！ :)

【参考方案2】：

运行grunt init:jquery 或grunt init:node 应该会给你一个很好的答案来回答这个问题。

这是在名为 init_test 的目录中运行 grunt init:jquery 并选择 grunt-init 提示的默认答案的结果。

    Writing CONTRIBUTING.md...OK
    Writing grunt.js...OK
    Writing libs/jquery/jquery.js...OK
    Writing libs/jquery-loader.js...OK
    Writing libs/qunit/qunit.css...OK
    Writing libs/qunit/qunit.js...OK
    Writing README.md...OK
    Writing src/init_test.js...OK
    Writing test/init_test.html...OK
    Writing test/init_test_test.js...OK
    Writing LICENSE-MIT...OK

见https://github.com/gruntjs/grunt-init

【讨论】：

感谢碳税。但这是一个极其简单的例子（只有一个 js 文件）。我正在寻找一个稍微复杂的 Web 示例，其中包含 html、sass/css、js 文件。这里的例子只是有一个 dist 目录，在更复杂的情况下似乎不够用。例如，您可能需要一个中间目录来创建连接的 css，然后需要一个最终的 dist 目录来缩小连接的 css。 （这就是 H5BP ant-build-script 采用的方法。）

所以你在想grunt init:web之类的东西？我想在 grunt-init 项目中看到这样的模板。

没错。我开始在我的 git 项目上创建这样的目录结构：github.com/archfirst/bullsfirst-jquery-backbone。我刚刚添加了一个任务来处理我的 src/sass 目录并在 src/css 目录中生成 css 文件。 src/css 目录只是一个中间目录，不会被检入仓库。

你考虑过让 grunt 为生成的文件创建一个build 目录吗？生成的 css 将进入 ./build/css，然后 copy 任务会将文件复制到 dist。告诉 git 忽略 ./build.