Concat и минимизировать JS-файлы в Node

Question

Есть ли в NodeJS какой-либо модуль для объединения и минимизации файлов JavaScript?

Answer 1

Я рекомендую использовать UglifyJS , который является библиотекой JavaScript-анализатора / mangler / compress / beautifier для NodeJS.

Если вас интересуют средства автоматизации, которые не просто объединяют и минимизируют файлы, есть следующие решения:

• GruntJS - это инструмент для построения командной строки на основе задач для проектов JavaScript. В текущей версии есть следующие встроенные задачи:

  1. concat - объединить файлы.
  2. init - Создание леса проекта из предопределенного шаблона.
  3. lint - проверка файлов с помощью JSHint .
  4. min - Минимизировать файлы с помощью UglifyJS .
  5. qunit - Выполнить QUnit модульные тесты в автономном PhantomJS экземпляре.
  6. сервер - Запустите статический веб-сервер.

Помимо этих задач доступно множество плагинов .

• Gulp - это инструментарий, который поможет вам автоматизировать болезненные или трудоемкие задачи в рабочем процессе разработки. Для веб-разработки (если это ваше дело) это может помочь вам, выполнив предварительную обработку CSS, JS-транспиляцию, минификацию, живую перезагрузку и многое другое. Интеграции встроены во все основные IDE, и людям нравится работать с PHP, .NET, Node.js, Java и другими. Имея более 1700 плагинов (и многие из них можно обойтись без плагинов), gulp позволяет вам прекратить работу с системами сборки и вернуться к работе.

• Yeoman - это надежный и продуманный набор инструментов, библиотек и рабочего процесса, который может помочь разработчикам быстро создавать красивые, привлекательные веб-приложения.

  1. Молниеносные строительные леса - легко создавать новые проекты с настраиваемыми шаблонами (например, HTML5 Boilerplate , Twitter Bootstrap ), AMD (через RequireJS ) и многое другое.
  2. Автоматическая компиляция CoffeeScript & Compass - наш LiveReload процесс наблюдения автоматически компилирует исходные файлы и обновляет ваш браузер всякий раз, когда вносятся изменения, поэтому вам не нужно это делать.
  3. Автоматически связывает ваши скрипты - все ваши скрипты автоматически запускаются с jshint , чтобы убедиться, что они следуют лучшим практикам языка.
  4. Встроенный сервер предварительного просмотра - больше не нужно запускать свой собственный HTTP-сервер. Мой встроенный может быть запущен только одной командой.
  5. Потрясающая оптимизация изображений - я оптимизирую все ваши изображения, используя OptiPNG и JPEGTran, чтобы ваши пользователи могли тратить меньше времени на загрузку ресурсов и больше времени на использование вашего приложения.
  6. Генерация манифеста AppCache - я создаю манифесты кэша вашего приложения для вас. Просто создайте проект и бум. Вы получите его бесплатно.
  7. Процесс сборки Killer - вы не только получаете минификацию и конкатенацию; Я также оптимизирую все ваши файлы изображений, HTML, скомпилирую ваши файлы CoffeeScript и Compass , сгенерирую вам манифест кэша приложения и, если вы используете AMD, мы пропустим эти модули через r.js, так что вам не нужно.
  8. Интегрированное управление пакетами - нужна зависимость? Это просто нажатие клавиши. Я позволяю вам легко искать новые пакеты через командную строку (например, yeoman search jquery ), устанавливать их и обновлять без необходимости открывать браузер.
  9. Поддержка синтаксиса модуля ES6 - поэкспериментируйте с написанием модулей с использованием новейшего синтаксиса модуля ECMAScript 6. Это экспериментальная функция, которая возвращается к ES5, поэтому вы можете использовать код во всех современных браузерах.
  10. PhantomJS Unit Testing - легко запускайте свои модульные тесты в автономном WebKit с помощью PhantomJS . Когда вы создаете новое приложение, я также включаю некоторые тестовые леса для вашего приложения.

Answer 2

UglifyJS - это Node-модуль, предназначенный для минимизации JavaScript. Я не думаю, что он также объединяет файлы, но, возможно, я пропустил этот вариант.

Edit: С UglifyJS 2 он также имеет встроенную конкатенацию.

Если вы хотите сделать это встроенным в ваше приложение узла, это действительно просто. Это позволяет вам динамически генерировать минимизированный / сцепленный js-скрипт во время выполнения без использования grunt или yeoman way.

npm install uglify-js

и в вашем модуле:

var fs = require('fs');
var uglify = require("uglify-js");

var uglified = uglify.minify(['file1.js', 'file2.js', 'file3.js']);

fs.writeFile('concat.min.js', uglified.code, function (err){
  if(err) {
    console.log(err);
  } else {
    console.log("Script generated and saved:", 'concat.min.js');
  }      
});

Answer 3

Если вы используете Connect, то мне повезло с Connect-Assetmanager

Answer 4

Вам будет лучше использовать что-то вроде gulp / webpack для объединения / организации / объединения ваших активов.

---

Чтобы присоединиться к js-файлу, вы можете сделать это в твиттер-файле начальной загрузки Twitter

cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js

Это просто объединение файлов с выводом в файл js

Затем вы можете установить uglify-js для минимизации js:

npm -g install uglify-js

И выполните эту команду с вашим путем / file.js ofc:

uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js

Как уже упоминалось в комментариях, начиная с uglifyjs 2, вы также можете сделать:

uglifyjs --compress --mangle -- input.js

Answer 5

Попробуйте эти два плагина для Grunt

https://www.npmjs.org/package/grunt-contrib-concat

https://www.npmjs.org/package/grunt-contrib-uglify

Вы можете установить все, что вам нужно, вот так:

npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-uglify

Затем создайте файл grunt, например, так:

Gruntfile.js

module.exports = function(grunt){
  grunt.initConfig({
    concat: {
      options: {
        process: function(src, path){
          return '\n/* Source: ' + path + ' */\n' + src;
        }
      },
      src: [
        '../src/**/*.js'
      ],
      dest: '../bin/app-debug.js'
    },
    uglify: {
      src: '../bin/app-debug.js',
      dest: '../bin/app.js'
    },
    watch: {
      options: {
        atBegin: true,
        event: ['all']
      },
      src: {
        files: '../src/**/*.js',
        tasks: ['concat']
      },
      dist: {
        files: '../bin/app-debug.js',
        tasks: ['uglify']
      },
    }
  }

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('default', ['watch']);
}

Наконец, введите grunt в терминале, и Grunt начнет наблюдать за вашими файлами JavaScript на предмет изменений и автоматически выполнит конкати увеличьте их (всякий раз, когда вы сохраняете изменения в своих файлах js в ../src/

Answer 6

Если вам нравится подход конвейера ресурсов Rails 3.1, попробуйте мою библиотеку connect-assets .

Answer 7

Я бы определенно предложил простой режим Closure Compiler.

Answer 8

Может быть, не совсем то, что вы ищете, но Enderjs может работать.

Answer 9

Если у вас уже есть uglify-js, ваш код использует некоторые из последних функций ES6 (ECMAScript 2015) , и он только что вернул вам ошибки синтаксического анализа при первом запуске, а затем установите uglify- e s :

npm install uglify-es -g

Или:

npm install mishoo/UglifyJS2#harmony

Объяснение содержится в пакете uglify-js-es6 :

Это временный пакет, содержащий последний выпуск ветви 'harmony' uglifyjs ( UglifyJS2 ).

Вы все еще можете запустить его нормально с помощью команды uglifyjs.Пример сжатия и искажения:

uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js

, который создаст один файл со всеми файлами JS в папке.Двойная черта (--) просто запрещает использование входных файлов в качестве аргументов параметров.