缩小一些文件，将所有文件合并到Grunt.JS中 [英] Minify some files, combine all, with Grunt.JS

问题描述

我正在将一个开发团队从Chirpy（一个用于视觉工作室的插件）移动到组合&将CSS / JS文件缩小为工作流自动化过程的一部分。

在chirpy中，配置看起来像这样（为了简洁起见，截断）：

 < FileGroup Name =scripts.combined.jsMinify =both> 
< File Path =forms.jsMinify =false/> 
< File Path =cookie_monster.jsMinify =true/> 
 ... 
< / FileGroup> 
  

所以在这个简略的例子中，我有2个文件。一个需要被缩小，另一个不需要。 （根据这里的人，缩小forms.js打破功能，我还没有分配时间来解决这个问题）。

在 grunt ，我需要在这个列表中的文件的部分上运行缩小任务，而不是在其他文件上。然后我需要在所有文件（缩小或以其他方式）上运行 concat 任务。

假设uglifyJS需要一个 dest 设置为输出缩小文件，我是否简单地将它设置为 temp.min.js ，并且在我的concat任务中，使用这个文件来构建我的 scripts.combined.js 文件[包括缩小和放大unminified files]，并使用grunt clean删除 temp.min.js 文件？

有没有更好的方法来做到这一点？

我也关注潜在的加载顺序冲突。当前工具被配置为合并所有这些文件，每个文件上都有一个标志指示是否应该缩小。我不确定如何复制这个工作流程w / grunt

解决方案

如果您有时间从Chirpy迁移到Grunt ，您肯定有时间尝试使用几个不同的缩小器，并检查不 中的 forms.js 模块。

你正在做的事情很好，但我会主张只使用uglify做所有事情。在我的情况下，我将所有脚本复制到一个build文件夹，然后运行uglify。

我这样配置uglify。

  uglify：{
 js：{
 files：{'bin / public / js / all.js'：'bin / public /js/**/*.js'}，
选项：{
 preserveComments：false 
} 
} 
} 
  

您可以查看回购GitHub ，它可能会给你一些想法。

你可以简单地通过在你定义 uglify target。

  uglify：{
 js：{
文件：{
'bin / public / js / all.js'：[
'bin / public / js /重要/ ** / *。js'，
'bin / public / js / something.js'，
'bin / public / js / else.js'，
'bin / public / js / unimportant / *。js'，
 
 //你甚至可以排除东西
'bin / public / js / do-not-minify / ** / *。js'
] 
} 
} 
 } 
  

您可以检查 Grunt file globbing patterns 获取更多信息。

更新

您的文件在globbing模式中描述的顺序是它们将被处理的顺序，几乎所有在Grunt中使用glob的任务都是如此。如果你不能丑化一切，我猜你仍然想要连接。在这种情况下，我建议你有一个类似下面的伪代码的流程，让你继续：

  uglify： {
 js：{
 files：{'bin / public / js / all.js'：[
 //使用您需要的重要顺序
'src / public / 
 
 
 $！ b $ b //使用您需要的重要顺序
'src / the-ones-you-dont-minify / ** / *。js'，
'！the-ones-you-minified '
} 
 
 grunt.registerTask（'build'，['clean'，'uglify：js'，'concat']）; 
  

I'm moving a dev team away from Chirpy, an add-in for visual studio, for combination & minification of CSS/JS files, over to grunt as part of a workflow automation process.

In chirpy, the config looks something like this (truncated for brevity):

<FileGroup Name="scripts.combined.js"  Minify="both">
    <File Path="forms.js" Minify="false" />
    <File Path="cookie_monster.js" Minify="true" />
    ...
</FileGroup>

So in this abridged case, I have 2 files. One needs to be minified, the other doesn't. (according to the folks here, minifying forms.js breaks functionality, and I haven't been allocated time to fix that yet).

In grunt, I need to run a minification task on some of the files in this list, but not on others. I then need to run a concat task on all files (minified or otherwise).

Given that uglifyJS needs a dest set to output the minified file, do I simply set this to something like temp.min.js, and in my concat task, use this file to build my scripts.combined.js file [comprised of both minified & unminified files], and use grunt clean to remove the temp.min.js file?

Is there a better way to do this?

[EDIT TO ADD] I'm also concerned about potential load-order conflicts. The current tool is configured as both "combine all of these files", with a flag on each file indicating whether or not it should be minified. I'm not sure how to replicate this workflow w/ grunt

解决方案

If you've got time to migrate from Chirpy to Grunt, you surely have time to try a couple of different minifiers and check for one which doesn't break your forms.js module.

What you're doing is just fine, but I would argue in favor of using just uglify for everything. In my case, I copy all the scripts to a build folder, and then just run uglify on them.

I configured uglify like this.

uglify: {
    js: {
        files: { 'bin/public/js/all.js': 'bin/public/js/**/*.js' },
        options: {
            preserveComments: false
        }
    }
}

You can check out the repo on GitHub, it might give you a couple of ideas.

You can determine the ordering simply by being explicit about it when you define the files in your uglify target.

uglify: {
  js: {
    files: { 
      'bin/public/js/all.js': [
        'bin/public/js/IMPORTANT/**/*.js',
        'bin/public/js/something.js',
        'bin/public/js/else.js',
        'bin/public/js/unimportant/*.js',

        // you can even exclude stuff
        'bin/public/js/do-not-minify/**/*.js'
      ]
    }
  }
}

You can check Grunt file globbing patterns for more info.

Update

The order in which your files are described in the globbing pattern is the order in which they'll be processed, this is true for almost all tasks that take a glob in Grunt. If you can't uglify everything, I'm guessing you'll still want to concatenate. In that case, I'd advise you have a flow like the following pseudo-code, to get you going:

uglify: {
  js: {
    files: { 'bin/public/js/all.js': [
      // using whichever order of importance you need
      'src/public/js/**/*.js',
      '!the-ones-you-dont-minify'
    ]
  }
},
concat: {
  // using whichever order of importance you need
  'src/the-ones-you-dont-minify/**/*.js',
  '!the-ones-you-minified'
}

grunt.registerTask('build', ['clean', 'uglify:js', 'concat']);

这篇关于缩小一些文件，将所有文件合并到Grunt.JS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！