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

我花了整整一天的时间来试图弄清楚如何从Grunt开始，但是我能够find的所有文档（在GitHub上）都指定了选项，而没有其他的东西。

我正在寻找一个更方便用户的文档/方法，因为我是Grunt本身的新手。

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

<!-- styles --> <!-- /styles --> 

和

 <!-- js --> <!-- /js --> 

Grunt应该做的是：

• 看看我的CSS目录里面
• 压缩文件在一个“main.css”和“main.js”应用程序
• 打开html模板（如果它不需要tmp版本，而是能够更新相同的html文件，那么将会很好），并在那里写入链接到创build的文件的最终<link>和<script>标签一个时间戳（用于caching清除）

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

我看着“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）的组合，而当我们通过很酷的咕噜包，我build议使用grunt-revcaching中断。

要使脚本按预期工作，请查看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将“收集”所有这些，并创build一个configuration对象，然后可以用于压缩/缩小。 我的任务是这样的：

 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 -->注释，但我不完全确定它的工作原理（我没有testing过）。 其中一位Yeoman / grunt-usemin的维护者Addy Osmanibuild议使用grunt-rev： https ： //github.com/yeoman/grunt-usemin/issues/104 。

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