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

Question

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

我正在寻找一个更加用户友好的文档/操作方法,因为我是Grunt本身的新手.

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

<!-- styles -->

<!-- /styles -->

和

<!-- js -->

<!-- /js -->

Grunt应该做的是:

• 看看我的css目录
• 在一个"main.css"和"main.js"应用程序中压缩文件
• 打开html模板(如果它不需要tmp版本,但是能够更新相同的html文件会很棒)并在那里写下final <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任务.这将允许您包装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.如果这就是你想要做的,我打赌你可以,但我强烈建议你不要这样做.