gruntjs - 使用 Grunt.JS 缩小一些文件，合并所有文件

Question

我正在将一个开发团队从用于组合和缩小 CSS/JS 文件的 Visual Studio 插件 Chirpy 转移到作为工作流自动化过程的一部分的 grunt。

在 chirpy 中，配置看起来像这样(为简洁起见被截断):

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

所以在这个删节的例子中，我有 2 个文件。一个需要缩小，另一个不需要。 (据这里的人说，缩小 forms.js 会破坏功能，我还没有分配时间来解决这个问题)。

在 grunt ，我需要在此列表中的某些文件上运行缩小任务，而不是在其他文件上运行。然后我需要运行 concat所有文件(缩小或其他)的任务。

鉴于 uglifyJS 需要一个 dest设置输出缩小文件，我是否只需将其设置为 temp.min.js ，并在我的 concat 任务中，使用此文件来构建我的 scripts.combined.js文件[由缩小和未缩小的文件组成]，并使用 grunt clean 删除 temp.min.js文件？

有一个更好的方法吗？

[编辑添加]
我还担心潜在的加载顺序冲突。当前工具被配置为“合并所有这些文件”，每个文件上都有一个标志，指示是否应该缩小它。我不确定如何使用 grunt 复制此工作流程

Answer 1

如果你有时间从 Chirpy 迁移到 Grunt，你肯定有时间尝试几个不同的缩小器并检查一个不会破坏你的 forms.js 的工具。模块。

你正在做的很好，但我会赞成只使用 uglify 来处理所有事情。就我而言，我将所有脚本复制到构建文件夹，然后在它们上运行 uglify。

我像这样配置了uglify。

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

您可以 check out the repo on GitHub ，它可能会给你一些想法。

您可以通过在定义 uglify 中的文件时明确说明来确定排序。目标。

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'
      ]
    }
  }
}

您可以查看 Grunt file globbing patterns了解更多信息。

更新

在 globbing 模式中描述文件的顺序是它们将被处理的顺序，这对于在 Grunt 中采用 glob 的几乎所有任务都是如此。如果你不能丑化所有东西，我猜你仍然想连接。在这种情况下，我建议您使用类似以下伪代码的流程来帮助您:

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