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

Question

我正在将开发团队从Chirpy转移到视觉工作室的附加组件,用于组合和缩小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文件[由缩小和未缩小的文件组成],并使用grunt clean来删除该temp.min.js文件？

有一个更好的方法吗？

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

Answer 1

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

你正在做的事情很好,但我赞成只使用uglify来做所有事情.在我的例子中,我将所有脚本复制到build文件夹,然后只对它们运行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文件通配模式以获取更多信息.

更新

在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 [module name])

例如,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"
  }
}