Минимизировать некоторые файлы, объединить все, с Grunt.JS

Я перемещаю команду разработчиков из Chirpy, надстройки для визуальной студии, для объединения и минимизации файлов CSS/JS, чтобы хрюкать как часть процесса автоматизации рабочего процесса.

В chirpy config выглядит примерно так (сокращенно для краткости):

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

Итак, в этом сокращенном случае у меня есть 2 файла. Нужно быть минимизированным, а другой - нет. (по словам людей здесь, minifying forms.js нарушает функциональность, и мне еще не было выделено время, чтобы исправить это).

В grunt мне нужно запустить задачу минимизации для некоторых файлов в этом списке, но не для других. Затем мне нужно запустить задачу concat для всех файлов (поменьше или иначе).

Учитывая, что для uglifyJS требуется набор dest для вывода миниатюрного файла, просто задаю ли это что-то вроде temp.min.js, и в моей concat-задаче используйте этот файл для сборки моего файла scripts.combined.js [, состоящего из обоих миниатюрные и неустановленные файлы], и используйте grunt clean для удаления файла temp.min.js?

Есть ли лучший способ сделать это?

[EDIT TO ADD] Я также обеспокоен потенциальными конфликтами порядка загрузки. Текущий инструмент настроен как "объединить все эти файлы", с флагом в каждом файле, указывающим, следует ли его минимизировать. Я не уверен, как реплицировать этот рабочий процесс w/grunt

Ответ 1

Если у вас есть время для перехода с Chirpy на Grunt, у вас наверняка есть время попробовать пару разных minifiers и проверить, не отрывает ли ваш модуль 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 для получения дополнительной информации.

Update

Порядок, в котором ваши файлы описаны в шаблоне globbing, - это порядок, в котором они будут обрабатываться, это верно для почти всех задач, которые принимают глобус в Grunt. Если вы не можете угадать все, я предполагаю, что вы все равно захотите объединиться. В этом случае я бы посоветовал, что у вас есть поток, такой как следующий псевдокод, чтобы вы пошли:

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']);

Ответ 2

Установить node.js
Добавьте gruntfile.js и package.json в корень проекта (изменить пути файлов по вашему желанию в файле gruntfile.js(возможно, их нужно открыть в текстовой панели, поскольку они не отображаются в визуальной студии)
Откройте node.js терминал (командная строка) и перейдите в каталог проекта
Тип:

npm install grunt-ts --save [нажать enter]

npm install grunt-cli -g [нажать enter]

grunt [нажмите enter]

(если отсутствуют модули, установите их: npm install [имя модуля] )

например, npm install grunt-contrib-uglify npm install grunt-contrib-watch

Затем введите grunt

следует минимизировать файлы без ошибок, если в файлах javascript отсутствуют erros (запустите 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"
  }
}