Concat и минимизировать JS-файлы в Node
Есть ли в NodeJS какой-либо модуль для объединения и минимизации файлов JavaScript?
9 ответов
Если вы используете Connect, то мне повезло с Connect-Assetmanager
Я рекомендую использовать UglifyJS, которая является библиотекой JavaScript-парсера / mangler / compressor / beautifier для NodeJS.
Если вы заинтересованы в инструментах автоматизации, которые делают больше, чем просто объединяют и минимизируют файлы, есть следующие решения:
GruntJS - это инструмент для построения командной строки на основе задач для проектов JavaScript. Текущая версия имеет следующие встроенные задачи:
Помимо этих задач есть много доступных плагинов.
Gulp - это инструментарий, который поможет вам автоматизировать болезненные или трудоемкие задачи в процессе разработки. Для веб-разработки (если это ваше дело) она может помочь вам, выполнив предварительную обработку CSS, JS-конвейеризацию, минификацию, живую перезагрузку и многое другое. Интеграция встроена во все основные IDE, и людям нравится работать с PHP, .NET, Node.js, Java и другими. Имея более 1700 плагинов (и многие из них вы можете обойтись без плагинов), вы позволите себе прекратить возиться с системами сборки и вернуться к работе.
Yeoman - это надежный и продуманный набор инструментов, библиотек и рабочего процесса, который может помочь разработчикам быстро создавать красивые, привлекательные веб-приложения.
- Молниеносные строительные леса - легко создавайте новые проекты с помощью настраиваемых шаблонов (например, HTML5 Boilerplate, Twitter Bootstrap), AMD (через RequireJS) и многого другого.
- Автоматическая компиляция CoffeeScript & Compass - наш процесс наблюдения LiveReload автоматически компилирует исходные файлы и обновляет ваш браузер всякий раз, когда вносятся изменения, поэтому вам не нужно это делать.
- Автоматически связывайте ваши скрипты - все ваши скрипты автоматически запускаются на jshint, чтобы убедиться, что они следуют лучшим практикам языка.
- Встроенный сервер предварительного просмотра - больше не нужно запускать свой собственный HTTP-сервер. Мой встроенный может быть запущен только одной командой.
- Потрясающая оптимизация изображений - я оптимизирую все ваши изображения с помощью OptiPNG и JPEGTran, чтобы ваши пользователи могли тратить меньше времени на загрузку ресурсов и больше времени на использование вашего приложения.
- Генерация манифеста AppCache - я создаю для вас манифесты кэша приложения. Просто построить проект и бум. Вы получите это бесплатно.
- Процесс сборки Killer - вы получаете не только минификацию и конкатенацию; Я также оптимизирую все ваши файлы изображений, HTML, скомпилирую ваши файлы CoffeeScript и Compass, сгенерирую вам манифест кеша приложений, и, если вы используете AMD, мы пропустим эти модули через r.js, так что вам не придется это делать.
- Интегрированное управление пакетами - нужна зависимость? Это просто нажатие клавиши. Я позволяю вам легко искать новые пакеты через командную строку (например, yeoman search jquery), устанавливать их и поддерживать их в актуальном состоянии без необходимости открывать браузер.
- Поддержка синтаксиса модуля ES6 - поэкспериментируйте с написанием модулей с использованием новейшего синтаксиса модуля ECMAScript 6. Это экспериментальная функция, которая возвращается к ES5, поэтому вы можете использовать код во всех современных браузерах.
- Модульное тестирование PhantomJS - легко запускайте свои тесты в автономном WebKit через PhantomJS. Когда вы создаете новое приложение, я также включаю некоторые тестовые леса для вашего приложения.
UglifyJS - это Node-модуль, предназначенный для минимизации JavaScript. Я не думаю, что он также объединяет файлы, но, возможно, я пропустил этот вариант.
Редактировать: С UglifyJS 2, он также имеет встроенную конкатенацию.
Если вы хотите сделать это встроенным в ваше приложение узла, это действительно легко. Это позволяет вам динамически генерировать минимизированный / сцепленный js-скрипт во время выполнения без использования метода grunt или yeoman.
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');
}
});
Вам будет лучше использовать что-то вроде gulp / webpack для объединения / организации / объединения ваших ресурсов.
Чтобы присоединиться к js-файлу, вы можете сделать это в твиттер-файле начальной загрузки.
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
Если вам нравится подход с конвейером ресурсов в Rails 3.1, попробуйте мою библиотеку connect-assets.
Попробуйте эти два плагина для 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/
Может быть, не совсем то, что вы ищете, но Enderjs может работать.
Если у вас уже есть uglify-js ваш код использует некоторые из новейших функций ES6 (ECMAScript 2015), и он просто возвращает вам ошибки синтаксического анализа при первом запуске, а затем устанавливает обновления:
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 в папке. Двойная черта (--) просто запрещает использование входных файлов в качестве аргументов параметров.