Как минимизировать HTML с помощью CSS и Javascript? [закрытый]

У меня есть .html-документ с CSS и Javascript внутри документа (без внешних файлов). Есть ли какой-то онлайн-инструмент, который minify документ и Javascript для очень небольшого размера? Я видел много нечитаемых скриптов, где все переменные и имена функций заменяются однобуквенными именами и т. д. Пожалуйста, совет.

9
compression css html javascript jquery

9 ответов

Редактировать 2 (22 Февраля 2017): теперь лучший инструмент для минимизации ваших активов (и многое другое, добавляя загрузчики и плагины), безусловно,Webpack.

пример конфигурации для перемещения всех ваших .css в одном файле и сократите ее:

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        minimize: true
      }
    }
  ]
}

Правка 1 (16 Сентября 2014): даже лучше, теперь у вас есть задач бегунов как залпом или грунт.

задач бегунки-это небольшие приложения, которые используются для автоматизации многих трудоемкие, скучные (но очень важные) задания, которые вам предстоит делайте при разработке проекта. К ним относятся такие задачи, как выполнение тесты, объединение файлов, минимизация и предварительная обработка CSS. От просто создав файл задачи, вы можете проинструктировать Task runner автоматически позаботьтесь о любой задаче разработки, которую вы можете подумайте, как вы вносите изменения в файлы. Это очень простая идея эта воля вам сэкономить много времени и позволит вам сосредоточиться на развитие.

читать надо: начало работы с Gulp.js

пример задачи с конкатенацией и минимизацией JavaScript (и JSHint):

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

оригинальный ответ (19 июля 2012): советую HTML5 шаблонный скрипт сборки, который может минимизировать ваши JS и CSS.

10

хороший компрессор javascript также компилятор закрытия Google и наоборот, чтобы сделать сжатый код немного лучше читаемым, вы можете использовать Javascript Beautifier. Вы также можете посмотреть phpEasyMin.

7

компилятора было правильно рекомендовано для JS; но не многие знают о Google таблицы стилей закрытия. Одной из особенностей таблиц стилей закрытия является переименование, где

<style>
  .descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
  <p class="descriptive-element-class-name">Lorem ipsum</p>
  <p class="descriptive-element-class-name">Lorem ipsum</p>
</div>

станет

<style>
  .a-b .a-c {color:red;}
</style>
<div class="a-b">
  <p class="a-c">Lorem ipsum</p>
  <p class="a-c">Lorem ipsum</p>
</div>

также будет дальнейшая минимизация; и учитывая тот факт, что OP указывает, что все ресурсы включены в html, это может в конечном итоге сэкономить довольно много трафика.

NB: если вы проверьте любую страницу результатов поиска Google, вы увидите, что их имена классов и идентификаторов почти никогда не длиннее 4 случайных символов

5

с помощью много скачать minifiers.

здесь даже некоторые это минимизировать CSS.

3

боюсь, вам придется сделать это в два шага:

  1. ручной поиск и замена глобальных объектов в текстовом редакторе
  2. minifiers, чтобы закончить работу на css и js

У меня был аналогичный вопрос некоторое время назад (о глобальных объектах и ключах объектов). Ответ, который я получил, заключался в том, что ни один инструмент не будет делать предположений о глобальном контексте. В вашем примере они не будут уменьшать "pageLoad", потому что он может использоваться другим фрагментом html или JS, который вы не обеспечил.

обходным путем в вашем примере было бы сделать функцию pageLoad локальной и добавить событие onload динамически в скрипте:

elt.onload=function(){pageLoad();};
3

хотя код JavaScript может быть сжат и распакован в JavaScript (см. другие ответы), на самом деле трудно достичь того же результата в CSS. В настоящее время нет инструмента, который будет делать больше, чем удалять ненужные пробелы (см. также существуют ли какие-либо агрессивные инструменты минимизации CSS?), поскольку имена идентификаторов и классов не могут быть изменены без разрушения связи между HTML и CSS.

кроме того, вы не можете удалить ничего из разметки HTML, кроме пробел. Ну, вы можете минимизировать имена классов и идентификатор, но в настоящее время нет инструмента, который обновит эти минимизированные значения в ваших CSS/JS-файлах, поэтому это сделает ваш сайт уродливым и сломанным. И даже пустые элементы часто необходимы, чтобы получить некоторые CSS-эффекты (да, я смотрю на вас, IE6). Это касается слишком в JavaScript имена функций.

TL; DR:к сожалению, нет инструмента "все в одном". Самое близкое - htmlcompressor.

1

попробуйте http://prettydiff.com/. Он предлагает автоматическое определение языка и может минимизировать html, css и javascript. Этот инструмент предполагает, что теги скриптов без типа mime или с соответствующим типом MIME javascript должны содержать javascript или ничего. Кроме того, предполагается, что теги стилей без типа mime или с типом mime "text/css" содержат CSS. CSS и JavaScript минифицируются соответственно. Сам инструмент написан на javascript. У тебя нет причин. нужно использовать несколько инструментов.

1

никогда не пробовали, но слышали очень хорошие отзывы о компиляторе закрытия Google..Вы можете попробовать его

0

советую попробовать WebMarkupMin Online.

WebMarkupMin онлайн бесплатные онлайн инструменты для минимизации HTML, XHTML и XML-код. HTML и XHTML minifiers поддерживает минимизацию CSS-кода из style теги и атрибуты, а также минимизация кода JavaScript из script теги, атрибуты событий и гиперссылки с javascript: псевдо-протокола. Эти minifiers поддерживает несколько алгоритмов УСБ минификации (эффективная таблица стилей minifier, Майкрософт Аякс УСБ английское сокращение Cups и Yui CSS компрессор) и JavaScript minification (Дуглас Крокфорд помощью jsmin, Microsoft Ajax JS Minifier и Юи на JS компрессор).

эти инструменты основаны на WebMarkupMin библиотека.

0