Как минимизировать все js и css в MEAN.JS для производственной среды?

Question

Я только что разработал простое приложение MEAN.JS. MEAN.JS предоставляет команду grunt build это помогает мне минимизировать файлы js и css, расположенные в следующих папках

css: [
    'public/modules/**/css/*.css'
],
js: [
    'public/config.js',
    'public/application.js',
    'public/modules/*/*.js',
    'public/modules/*/*[!tests]*/*.js'
]

но как насчет минимизировать сторонние библиотеки, которые установлены с bower и расположен в public/lib/...? Все необходимые пути к файлам js и css уже находятся в файле конфигурации среды MEAN.JS.

Между тем, минимизированный файл JS application.min.js на самом деле просто "минимизирован", а не "укрупнен", имена переменных остаются такими же, как у оригинала, и очень длинные.

Вкратце, MEAN.JS уже предоставил какие-либо способы или функции, которые могут "увеличить" все файлы js и css, включая сторонние библиотеки?

Answer 1

РЕДАКТИРОВАТЬ:

Чтобы избежать ошибок при удалении сторонних файлов, включайте только не минимизированные сторонние файлы .js файлы в вашем config/env/all.js файл.

---

В настоящее время ваш grunt build Задача изменяет javascript-файлы вашего приложения, но не ваши javascript-файлы. Это делается через uglify задача в вашем grunt.js файл.

uglify: {
 production: {
  options: {
    mangle: false
  },
  files: {
    'public/dist/application.min.js': 'public/dist/application.js'
  }
 }
},

Если вы хотите удалить свои сторонние файлы, я предлагаю сделать следующее:

Добавьте файлы вашего поставщика в ваш grunt.js файл и uglify задача:

Измените объект конфигурации (около строки 170), чтобы включить файлы вашего поставщика:

// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
    var init = require('./config/init')();
    var config = require('./config/config');

    // insert vendor files
    grunt.config.set("vendorJavaScriptFiles", config.assets.lib.js);
    // note: you can do the same for your css files
    grunt.config.set("vendorCSSFiles", config.assets.lib.css);

    grunt.config.set('applicationJavaScriptFiles', config.assets.js);
    grunt.config.set('applicationCSSFiles', config.assets.css);
});

Добавьте свой vendorJavaScriptFiles на ваш uglify задача:

uglify: {
    production: {
        options: {
            mangle: false
        },
        files: {
            'public/dist/application.min.js': 'public/dist/application.js',
            'public/dist/vendor.min.js': '<%= vendorJavaScriptFiles %>'
        }
    }
}

Измени свой config/env/production.js файл, чтобы отразить ваш новый vendor.min файл:

assets: {
    lib: {
        css: [
            'public/lib/bootstrap/dist/css/bootstrap.min.css',
            'public/lib/bootstrap/dist/css/bootstrap-theme.min.css',
            // note you can follow a similar process for your css files
        ],
        js: 'public/dist/vendor.min.js'
    },
    css: 'public/dist/application.min.css',
    js: 'public/dist/application.min.js'
}

Теперь, когда вы бежите grunt build Вы должны получить оба applicaiton.min.js файл и vendor.min.js файл в вашем public/dist/ папка.

Я выделил их для ясности, но вы могли бы объединить их в один application.min.js файл, если вы предпочитаете.

Вот гораздо более подробное описание процесса: https://blog.dylants.com/2014/11/19/bundling-production-assets-for-mean-js/

Надеюсь это поможет.