分类导航

Node.js 发布时间：2022-04-24 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了node.js – Grunt – 使用时间戳压缩和包含资产，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

解决方法

你在这里走在正确的轨道上. 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 -->

运行时,useminPare将“收集”所有这些并生成一个配置对象,然后可以用于压缩/缩小.我的任务看起来像这样：

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
]);

如果您真的想使用时间戳,可以考虑将其@L_674_28@到<！ - build - >评论,但我不完全确定它是否有效(我没有测试过). Yeoman / grunt-usemin的维护者之一Addy Osmani建议使用grunt-rev：https://github.com/yeoman/grunt-usemin/issues/104.

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