13

我正在将一个开发团队从用于组合和缩小 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.jsscripts.combined.jstemp.min.js？

有一个更好的方法吗？

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

4

2 回答 2

14

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

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

我像这样配置了uglify。

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

你可以查看 GitHub 上的 repo，它可能会给你一些想法。

当您在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 文件通配模式以获取更多信息。

更新

在 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']);
于 2013-10-29T17:11:26.740 回答
7
  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 [module name] ）

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

然后输入咕噜

只要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"
  }
}
于 2014-09-22T16:26:37.147 回答