Сократите некоторые файлы, объедините все с помощью Grunt.JS

Я перевожу команду разработчиков из Chirpy, надстройки для Visual Studio, предназначенной для комбинирования и минимизации файлов 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 очистить, чтобы удалить файл temp.min.js?

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

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


person Scott Silvi    schedule 29.10.2013    source источник
comment
Просто ознакомьтесь с приведенным ниже руководством, и оно даст вам четкое представление. pointerunits.com/2014/08/   -  person Gnanasuriyan    schedule 11.08.2014


Ответы (2)


Если у вас есть время перейти с 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 для получения дополнительной информации.

Обновлять

Порядок, в котором ваши файлы описаны в шаблоне подстановки, — это порядок, в котором они будут обрабатываться, это верно почти для всех задач, которые принимают подстановку в 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']);
person bevacqua    schedule 29.10.2013
comment
прокомментируйте свой первый абзац: проблема не в моем времени, а в полном уровне регрессионного тестирования, которое будет иметь место, если я повлияю на form.js (здесь это ОЧЕНЬ деликатная тема... , раздутая кодовая база для некоторых критически важных функций. Рефакторинг, который очень высоко стоит в моем личном списке приоритетов) ... - person Scott Silvi; 29.10.2013
comment
.. и вернуться к проблеме под рукой. То, что вы только что описали, испортит ВСЕ мои файлы, не так ли? Мне нужно минимизировать некоторые из них, а не все. И, к моему редактированию, дополнительная проблема заключается в том, что важен порядок загрузки файлов - некоторые минимизированы, некоторые нет ... так что мне приходится забивать мои ворчащие задачи, чтобы минимизировать те, которые мне нужно минимизировать для временных файлов , затем объедините их в правильном порядке (как в минимизированном, так и в неминифицированном виде), а затем очистите их? - person Scott Silvi; 29.10.2013
comment
хорошо, да, это примерно тот процесс, которого я ожидал. Надеялся, что есть более чистый способ. Я полагаю, что могу выбросить их в свои собственные файлы, если они станут неуправляемыми. - person Scott Silvi; 30.10.2013
comment
ну да, чище было бы не исключать файлы из минификации. использование фреймворка, такого как Angular, также поможет вам распутать дерево зависимостей. - person bevacqua; 30.10.2013
comment
Да, последние пару лет я работал в MV*, сначала в Backbone, затем в Angular. Это в моем списке ... но этот первый проход должен вводить как можно меньше когнитивных издержек. - person Scott Silvi; 30.10.2013

  1. Установите node.js
  2. Добавьте gruntfile.js и package.json в корень проекта (измените пути к файлам по своему усмотрению в gruntfile.js (может потребоваться открыть в текстовой панели, поскольку она может не отображаться в Visual Studio)

  3. Откройте терминал Node.js (командная строка) и перейдите в каталог проекта.

  4. тип:

    npm установить grunt-ts --save [нажмите ввод]

    npm установить grunt-cli -g [нажмите ввод]

    хрюкать [нажать ввод]

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

например, 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"
  }
}
person Dally S    schedule 22.09.2014