更新

Question

我正在开发一个开发团队，远离Chirpy，一个视觉工作室的插件，用于组合＆amp;将CSS / JS文件缩小为工作流程自动化过程的一部分。

在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文件[由minized和amp;组成） unminified files]，并使用grunt clean删除temp.min.js文件？

有更好的方法吗？

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

Answer 1

如果你有时间从Chirpy迁移到Grunt，你肯定有时间尝试几个不同的minifiers并检查没有打破你的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

安装node.js
将gruntfile.js和package.json添加到项目的根目录（根据需要在gruntfile.js中修改文件的路径（可能需要在textpad中打开，因为可能无法在visual studio中显示）
打开Node.js终端（命令提示符）并转到项目目录
型：

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

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

grunt [按回车]

（如果有缺少的模块安装他们输入： npm install [模块名称] ）

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

然后输入grunt

应该缩小文件没有错误

这是我的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"
  }
}

使用Grunt.JS缩小一些文件，将所有文件组合在一起

2 个答案:

更新