使用 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 文件 [由两者组成minified & unminified files]，并使用 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']);

Answer 2

1. 安装 node.js

2. 将 gruntfile.js 和 package.json 添加到项目的根目录 （在 gruntfile.js 中根据需要修改文件的路径（可能需要在 textpad 中打开，因为在 Visual Studio 中可能不显示）

3. 打开 Node.js 终端（命令提示符）并进入项目目录

4. 类型：

   npm install grunt-ts --save [按回车]

   npm install grunt-cli -g [按回车键]

   咕噜[按回车]

（如果缺少模块，请安装它们，键入： npm install [模块名称] )

例如 npm install grunt-contrib-uglify npm install grunt-contrib-watch

然后输入 grunt

只要 javascript 文件丢失错误（通过 jsHint.com 运行），就应该缩小文件且没有错误

这是我的 gruntfile.js.....

module.exports = function (grunt) {

    // 1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            css: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css'
            },
            js: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js'
            }
        },
        cssmin: {
            css: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/min/production.min.css'
            }
        },
        uglify: {
            js: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/min/production.min.js'
            }
        },
        watch: {
            css: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                tasks: ['concat:css', 'cssmin:css']
            },
            js: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                tasks: ['concat:js', 'uglify:js']
            }
        }
    });

    // 2. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 3. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

};

这是我的 package.json 文件

{
  "name": "Grunt",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.5.0",
    "grunt-contrib-watch": "*"
  },
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-ts": "^1.11.13"
  }
}