Question

我花了一整天的时间试图弄清楚如何从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”和大量的替代品...但似乎没有一个整合所有要求，我无法让他们努力工作以获得我想要的东西。

Answer 1

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

要让您的脚本按预期运行，请查看useminPrepare task。这将允许您包装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
]);

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

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

Grunt - 使用时间戳压缩和包含资产

1 个答案: