logo标签列表

使用Grunt.JS压缩一些文件并合并所有文件。

gruntjsuglifyjs
13

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

在Chirpy中，配置看起来类似于以下内容（为简洁起见进行了截断）：

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

在这个简化的案例中，我有两个文件。其中一个需要被压缩，另一个则不需要。（根据这里的人说，对forms.js进行压缩会破坏功能，而我没有分配时间来修复它。）

在 grunt 中，我需要对此列表中的 一些 文件运行压缩任务，但不需要对其他文件运行。然后，我需要在所有文件（压缩或未压缩）上运行一个 concat 任务。

由于 uglifyJS 需要设置 dest 来输出压缩后的文件，那么我是不是只需要将其设置为类似于 temp.min.js 的东西，并在我的 concat 任务中使用该文件来构建我的 scripts.combined.js 文件[包括压缩和未压缩文件]，然后使用 grunt clean 删除 temp.min.js 文件？

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

[编辑添加]

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

只需查看下面的教程，它将为您提供清晰的图片。http://www.pointerunits.com/2014/08/grunt-cleaning-and-minifying-javascript.html - Gnanasuriyan
2个回答
14
如果你有时间从Chirpy迁移到Grunt，那么你肯定有时间尝试几种不会破坏你的 forms.js 模块的不同压缩程序。
你所做的很好，但我建议使用uglify来处理所有内容。在我的情况下，我将所有脚本复制到一个构建文件夹中，然后只运行uglify。
我像这样配置了uglify。
uglify: {
    js: {
        files: { 'bin/public/js/all.js': 'bin/public/js/**/*.js' },
        options: {
            preserveComments: false
        }
    }
}

你可以查看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文件全局匹配模式。

更新

在全局匹配模式中描述文件的顺序是它们被处理的顺序，对于几乎所有使用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']);
对于你第一段的评论：问题不在于我的时间，而是如果我影响了forms.js，那么将进行完整的回归测试。这是一个非常敏感的话题... forms.js是一种脆弱、臃肿的代码库，用于某些关键功能。重构它是我个人优先事项清单上的重要任务。 - Scott Silvi
回到问题本身。你刚才描述的会使我所有的文件都变丑，不是吗？我只需要缩小一些文件，而不是全部。另外，我的编辑中还有一个问题，就是文件的加载顺序很重要——有些被缩小了，有些没有……所以我必须把我的grunt任务弄得复杂一些，将我需要缩小的文件缩小到临时文件中，然后按正确的顺序（包括缩小和未缩小的文件）连接它们，最后再清理grunt？ - Scott Silvi
好的，是的，这大概是我预期的过程。希望有更简洁的方法。如果变得难以维护，我想我可以将它们放到自己的文件中。 - Scott Silvi
嗯，是的，更好的方式是不需要从缩小文件中排除文件。使用像Angular这样的框架也有助于解开依赖树。 - bevacqua
是的，我过去几年一直在MV*中工作，先是Backbone，然后是Angular。这在我的清单上...但是第一次需要尽可能少地引入认知负荷。 - Scott Silvi
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 [按回车键]

    grunt [按回车键]

(如果有缺少的模块，请通过以下方式进行安装: 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"
  }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接