4

我花了一整天的时间试图弄清楚如何从 Grunt 开始，但我能找到的所有文档（在 GitHub 上）都指定了选项，没有别的。

由于我是 Grunt 本身的新手，因此我正在寻找对用户更友好的文档/操作方法。

我想自动化几个 .css 文件的缩小过程，并将它们包含在我的模板中定义为的占位符中

<!-- styles -->

<!-- /styles -->

和

<!-- js -->

<!-- /js -->

Grunt 应该做的是：

  • 查看我的css目录
  • 在一个“main.css”和“main.js”应用程序中压缩文件
  • 打开 html 模板（如果它不需要 tmp 版本，但能够更新相同的 html 文件，那就太好了）并在那里写入链接到创建的文件的最终<link>和标签，并附加时间戳（用于缓存破坏<script>)

在我看来，这似乎是一种常见的方法，但我无法在那里找到任何准备好的东西。

我查看了“grunt-contrib-cssmin”、“cartero”、“grunt-includes”、“grunt-include-replace”、“grunt-usemin”和大量的替代方案......但似乎没有一个能整合所有要求，我'我不能让他们一起工作以获得我想要的东西。

4

1 回答 1

11

你在正确的轨道上。grunt-usemin将处理您正在寻找的大部分内容，但它确实需要其他软件包。为了让你的 CSS/JS 最小化，你需要使用grunt-contrib-cssmin（用于 CSS）、grunt-contrib-uglify（用于 JS）的组合，同时我们正在通过很酷的 grunt 包，我建议使用grunt-rev来破坏缓存。

要使您的脚本按预期工作，请查看useminPrepare 任务。这将让您包装您的 CSS 和 JS 文件，然后针对它们运行任务。例如，我的一个项目使用了 Bower 的一堆好东西，所以我的 footer.html 中有以下内容：

    <!-- build:js js/scripts.min.js -->
    <script src="./bower_components/zepto/zepto.js"></script>
    <script src="./bower_components/underscore/underscore-min.js"></script>
    <script src="./bower_components/eventEmitter/EventEmitter.js"></script>
    <script src="./bower_components/eventie/eventie.js"></script>
    <script src="./bower_components/imagesloaded/imagesloaded.js"></script>
    <script src="./bower_components/spin.js/spin.js"></script>
    <script src="./scripts/lib/zepto.touch.module.js"></script>
    <!-- endbuild -->

运行时，useminPrepare将“收集”所有这些并创建一个配置对象，然后可用于压缩/缩小。我的任务如下所示：

grunt.registerTask('produce',[
  'clean:main',      // clean out the /dist directory if it exists
  'copy',            // copy files to /dist
  'useminPrepare',   // prepare an object of files that will be passed to concat and/or uglify
  'concat',          // concatenate assets
  'uglify',          // minify assets
  'usemin',          // use the minified version of these files in my html
  'compass:produce', // run production version of compass
  'clean:post'       // cleanup junk
]);

如果你真的想使用时间戳，你可以考虑将它添加到<!-- build -->评论中，但我不完全确定它是否有效（我没有测试过）。Yeoman/grunt-usemin 的维护者之一 Addy Osmani 建议只使用 grunt-rev：https ://github.com/yeoman/grunt-usemin/issues/104 。

至于最后一个要点，我想你会想要创建一个 tmp 文件，否则你会破坏性地编辑你的基本 HTML。如果那是您想要做的，我敢打赌您可以，但我强烈建议您不要这样做。

于 2013-08-19T03:22:59.650 回答