Sdscompany.ru

Компьютерный журнал
3 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Unable to minify javascript

GulpUglifyError:Unable минимизировать JavaScript

Я пытаюсь минимизировать свои файлы сценариев, для которых я использую gulp Task runner И я пытаюсь gulp-uglify плагин

но я получаю ошибку как

когда я пытаюсь запустить gulp задачу как gulp конкат Любая помощь будет оценена по достоинству

9 Ответов

Чтобы увидеть ошибку в консоли:

Чтобы найти точный файл, с номером строки регистра ошибок и запустить эту задачу:

Основная ошибка возникает при использовании формата ES6. Используйте модуль gulp-uglify-es вместо ‘gulp-uglify’, чтобы преодолеть эту ошибку.

Вы использовали формат ES6 в своем файле скрипта? Если да, то попробуйте ES5 сейчас, потому что когда вы делаете gulp-uglify, он не понимает формат ES6 на данный момент а после этого попробуйте свой код

и запустить задачу gulp concat она будет работать

Я думаю, что лучшие ответы здесь не объясняют, как получить ошибку. В документах есть раздел об обработке ошибок:

gulp-uglify выдает событие ‘error’, если он не может минимизировать a конкретный файл

Поэтому просто зафиксируйте ошибку и делайте с ней все, что хотите (например, вход в консоль), чтобы увидеть имя файла, номер строки и дополнительную информацию:

или в более широком контексте:

Это дает вам очень полезную ошибку!

Попробуйте использовать это

Для меня это был устаревший вариант «preserveComments», который вызвал ошибку (и полностью разбил скрипт).

Нашел проблему с помощью:

Основная ошибка, из-за которой невозможно уменьшить JavaScript, — это путь, который не найден. Вы можете использовать задачу usemin для этого вам нужно:

вы можете иметь синтаксическую ошибку или использовать синтаксис ES6. вы можете попробовать https://skalman.github.io/UglifyJS-online/ во-первых.

Основываясь на моем ответе здесь:

‘terser’ — это новый ‘uglify-es’. ‘uglify-es’ больше не поддерживается.

Похожие вопросы:

Поскольку я слышал, как люди жалуются, что PHP не может справиться с этим, как насчет того, чтобы уменьшить JavaScript с помощью JavaScript? Я хочу что-то, что я могу просто скопировать и вставить и.

NodeJS будет минимизировать код javascript, который он отправляет в браузер. Есть ли способ предотвратить это, поэтому проще отлаживать код в Инспекторе Firebug / Chrome?

У меня есть статический сайт через GitHub страниц, построенный на Jekyll-Bootstrap. Мой маленький сайт включает в себя много JavaScript, и для удобства обслуживания я хотел бы, чтобы все JavaScript.

Я делаю веб-приложение java, используя Netbeans IDE, есть некоторые файлы javascript в netbeans IDE. Мне нужно автоматически запутать или минимизировать мои файлы javascript, когда я очищаю и создаю.

Я ищу, чтобы запутать и минимизировать динамически написанный javascript с ruby. У кого-нибудь есть предложения? Какой-то модуль apache, который будет перехватывать .JS-файл и запутать его до того.

Каков наилучший способ минимизировать ASP.NET генерируемые Javascript, такие как те, которые обслуживаются webresource.axd, в ASP.NET 3.5 во время выполнения? Я попытался использовать модуль.

Мой проект состоит из javascripts двух различных типов: Внешние обычные файлы .js.

WordPress.org

Support » Plugin: W3 Total Cache » Problems with JS and CSS minifying

Problems with JS and CSS minifying

– I have a problem with the loading of a slider create with revolution slider. I have put 11 rev slider javascript files in minify (load before /body) but this are not dislay on mobiles.
If I set minify “load in head”, I have the page speed insights error…

– If I minify all my CSS files, my website is broken on all devices

How can I fix theses ?

Don’t worry too much about the PageSpeed Insights score. It is just a guideline to help out making the user experience for your website the best. As an SEO expert, I’m not even getting a score of 100/100. If your website works well with the scripts loaded in the head, you could just settle with that.

About the minified CSS, do you still have styling or is the stylesheet empty? It might be CSS combined/loaded in the wrong order which breaks alignment and such. Then it’s an incompatibility with your theme. If you don’t have any styling on your website, CSS minify failed, which should show an error in your error logs.

Defintely sounds like an ordering issue for your css and js files.

You can switch minify to Manual mode and then use the Help Wizard to display all the files and then drag/drop them into the correct orders.

To know the correct order just turn off Minify and jot down the loading order of files (you can use a speed test site which should have a waterfall table of loading items) or use your browser’s developers tools to see them. Once you do see them write them down and then duplicate their order in the Manual mode. That should fix your js and css problem.

Alternatively, if you are comfortable with php code, you can adjust the ordering in your theme’s functions.php file…that way you can leave the Automatic minifiy mode instead of resorting to Manual mode. But might be a bit too advanced for most since it requires a lot of time and patience.

Btw, big thank you @gidomanders … i see you are always in this plugin’s support thread helping out people. You’re quite the machine! Hat’s off to you man and the amazing effort you put in here.

@fistfullofcrisco thanks, I’m helping out the W3 team on this forum to get more people in contact with a team member to help out. I can get you in contact with the team too so you can help me answer more accurately if you want to?

Do you have an update on this? Was the issue resolved? Please give us a feedback so you can close the topic and mark it as resolved.

  • This reply was modified 1 year, 9 months ago by Marko Vasiljevic .

Hi @vmarko,
thanks for your message.
I have fixed this problem by using another plugin. Sorry, not enough time to search solution anymore with yours.
But I use yours on another site with any problem.
Best regards

Читать еще:  Справочник по javascript

I seem to be encountering a similar issue. Meaning, after combining javascript files, the site fails to load. However, rearranging the scripts does seem to make a difference, though not everything still loads. I can safely say it’s an ordering issue at the moment. You mentioned using a speed test to determine the order. Can you please specify how and where I can do this? I tried using Pingdom tools and GTMetrix, but they produce two different results for the order of scripts.

Your help is appreciated!

@cl0ne when you disable minify, save and clear caches and then visit your website, your browser has something called Developer Tools. In chrome that’s in the right click menu as “inspect”. You have to go to the network tab and refresh the page. You can then see all requests for your website, which you can filter by JS. There’s the order you should use. I hope this helps, otherwise don’t hesitate to ask!

That’s exactly what I was looking for! Appreciate your support and your promptness!

Minifying your CSS, JS & HTML files using Gulp

When building a website it is important to consider the build process of CSS, JS & HTML files. Manual processes are not only slow, but they can be a cause of mistakes made in code, so it is always a good idea to automate the processes as much as possible.

In this article, I will be describing how to use Gulp to automate the minification of CSS, JS & HTML files.

What is Gulp?

Gulp is an open-source JavaScript toolkit, built on Node.js and npm, for automating painful or time-consuming tasks in front-end web development workflows.

Minifying files using Gulp

1. Get your computer ready

To begin, you will need to make sure that you have Node.js installed on your computer. You can download and install Node.js by visiting: https://nodejs.org/

2. Create a ‘package.json’ file

Once you have installed Node.js on your computer, you need to create a file called package.json and declare the npm packages that will be used for the minification process. Copy and paste the code below into your package.json file:

3. Create a ‘gulpfile.js’ file and add the required code

Next, create a file called gulpfile.js. Once this is done we can start adding the code that will automate the minification process.

Declare the required npm modules

The first thing that you will have to do is declare the npm modules that will be required by Gulp to automate processes. This can be done by inserting the below code into the gulpfile:

Declare supported browsers

When creating your CSS files, it is always good practice to make sure that you add prefixes to any styles for cross-browser compatibility. By adding the below code, you are declaring the browsers that you want to support (which will be used later when you create the gulp task to minify the CSS files):

Minifying CSS files

To create the CSS files, there are two options that are available based on:

i. if you are using SASS

ii. if you are using pure CSS

i. If you are using SASS

If you are using SASS files you can use the code below to compile and minify the final CSS file. The below code first declares a new gulp task, ‘gulp styles’, which runs the following sequence:

  1. the source SASS file is declared
  2. the SASS is compiled
  3. prefixes are added for cross-browser compatibility
  4. the code is minified
  5. the final CSS file is output to the declared destination.

ii. If you are using pure CSS

If you are using pure CSS files you can use the code below to compile and minify the final CSS file. This gulp task runs the following sequence:

  1. the source CSS file is declared
  2. prefixes are added for cross-browser compatibility
  3. the code is minified
  4. the final CSS file is output to the declared destination.

Minifying JS files

The below code first declares a new gulp task, ‘gulp scripts’, which runs the following sequence:

  1. the source directory for JS files is declared
  2. any JS files in the declared folder are minified
  3. the minfied JS files are output to the declared destination.

Minifying HTML files

The below code first declares a new gulp task, ‘gulp pages’, which runs the following sequence:

  1. the source directory for HTML files is declared
  2. any HTML files in the declared folder are minified
  3. the minfied HTML files are output to the declared destination.

Create a single task to minify CSS, JS, & HTML

The below code first declares a new gulp task, ‘gulp clean’, which deletes everything in the output folder (this is to ensure that only the required files are in the output folder).

The code then declares a task, ‘gulp default’, which runs the minification tasks in sequence:

  1. ‘gulp clean’ — to delete everything in the destination folder
  2. ‘gulp styles’ — to minify the CSS file
  3. ‘gulp scripts’ — to minify any JS files
  4. ‘gulp pages’ — to minify any HTML files

4. Initialise your local environment

Once you have created the two files, package.json and gulpfile.js, you are almost ready to go! Before you can begin minifying files, you must download the npm modules that are declared in your package.json file. This can be done by:

  1. opening a terminal window
  2. changing into the directory that you have saved the package.json and gulpfile.js files
  3. running the following command:
Читать еще:  Как сделать игру на javascript

If this does not work you may need administrator permissions on your computer, you can run the following command in that instance:

A new folder will appear in the same directory called ‘node_modules’.

5. Setup your file structure

Now that the Gulp tasks are declared, you need to create a new folder named ‘src’, and within that folder, you need to create two additional folders: ‘js’ and ‘css’.

In the ‘js’ folder you can add as many JS files as you want, with any name. In the ‘css’ folder you should add either the file ‘styles.scss’ or ‘styles.css’ depending on how you decided to minify your CSS in step 3.

6. Start minifying

When you’re at this step, and you’ve added your HTML files, you are ready to start minifying. Open your terminal window and change into the root directory of your project and run the command:

This should start compiling all of your CSS, JS, and HTML files and output them into a folder called ‘dist’.

You can also run the following commands to compile CSS, JS, and HTML files individually:

7. Enjoy your minified files

That’s all! You should now have optimised and minified files which will mean faster page-speed and improvements in SEO.

Как работают сжиматели JavaScript

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Перед выкладыванием JavaScript на «боевую» машину – пропускаем его через минификатор (также говорят «сжиматель»), который удаляет пробелы и по-всякому оптимизирует код, уменьшая его размер.

В этой статье мы посмотрим, как работают современные минификаторы, за счёт чего они укорачивают код и какие с ними возможны проблемы.

Современные сжиматели

Рассматриваемые в этой статье алгоритмы и подходы относятся к минификаторам последнего поколения.

Самые широко используемые – первые два, поэтому будем рассматривать в первую очередь их.

Наша цель – понять, как они работают, и что интересного с их помощью можно сотворить.

С чего начать?

  1. Убедиться, что стоит Java
  2. Скачать и распаковать http://closure-compiler.googlecode.com/files/compiler-latest.zip, нам нужен файл compiler.jar .
  3. Сжать файл my.js : java -jar compiler.jar —charset UTF-8 —js my.js —js_output_file my.min.js

Обратите внимание на флаг —charset для GCC. Без него русские буквы будут закодированы во что-то типа u1234 .

Google Closure Compiler также содержит песочницу для тестирования сжатия и веб-сервис, на который код можно отправлять для сжатия. Но скачать файл обычно гораздо проще, поэтому его редко где используют.

  1. Убедиться, что стоит Node.js
  2. Поставить npm install -g uglify-js .
  3. Сжать файл my.js : uglifyjs my.js -o my.min.js

Что делает минификатор?

Все современные минификаторы работают следующим образом:

Разбирают JavaScript-код в синтаксическое дерево.

Также поступает любой интерпретатор JavaScript перед тем, как его выполнять. Но затем, вместо исполнения кода…

Бегают по этому дереву, анализируют и оптимизируют его.

Записывают из синтаксического дерева получившийся код.

Как выглядит дерево?

Посмотреть синтаксическое дерево можно, запустив компилятор со специальным флагом.

Для GCC есть даже способ вывести его:

Сначала сгенерируем дерево в формате DOT:

Здесь флаг —print_tree выводит дерево, а —use_only_custom_externs убирает лишнюю служебную информацию.

Файл в этом формате используется в различных программах для графопостроения.

Чтобы превратить его в обычную картинку, подойдёт утилита dot из пакета Graphviz:

Пример кода my.js :

Результат, получившееся из my.js дерево:

В узлах-эллипсах на иллюстрации выше стоит тип, например FUNCTION (функция) или NAME (имя переменной). Комментарии к ним на русском языке добавлены мной вручную.

Кроме него к каждому узлу привязаны конкретные данные. Сжиматель умеет ходить по этому дереву и менять его, как пожелает.

Обычно когда код превращается в дерево – из него естественным образом исчезают комментарии и пробелы. Они не имеют значения при выполнении, поэтому игнорируются.

Но Google Closure Compiler добавляет в дерево информацию из комментариев JSDoc, т.е. комментариев вида /** . */ , например:

Такие комментарии не создают новых узлов дерева, а добавляются в качестве информации к существующем. В данном случае – к переменной minIEVersion .

В них может содержаться информация о типе переменной ( number ) и другая, которая поможет сжимателю лучше оптимизировать код ( const – константа).

Оптимизации

Сжиматель бегает по дереву, ищет «паттерны» – известные ему структуры, которые он знает, как оптимизировать, и обновляет дерево.

В разных минификаторах реализован разный набор оптимизаций, сами оптимизации применяются в разном порядке, поэтому результаты работы могут отличаться. В примерах ниже даётся результат работы GCC.

Объединение и сжатие констант

  • ‘my’ + ‘string’ → «mystring» .
  • 600 * 600 * 5 → 18E5 (научная форма числа, для краткости).
  • 1 && 0 → 0 .
  • b && 0 → без изменений, т.к. результат зависит от b .

Укорачивание локальных переменных

  • Локальная переменная заведомо доступна только внутри функции, поэтому обычно её переименование безопасно (необычные случаи рассмотрим далее).
  • Также переименовываются локальные функции.
  • Вложенные функции обрабатываются корректно.

Объединение и удаление локальных переменных

После оптимизации GCC:

  • Локальные переменные были переименованы.
  • Лишние переменные убраны. Для этого сжиматель создаёт вспомогательную внутреннюю структуру данных, в которой хранятся сведения о «пути использования» каждой переменной. Если одна переменная заканчивает свой путь и начинает другая, то вполне можно дать им одно имя.
  • Кроме того, операции elem = getElementsById и elem.parentNode объединены, но это уже другая оптимизация.

Уничтожение недостижимого кода, разворачивание if -веток

Если переменная присваивается, но не используется, она может быть удалена. В примере выше эта оптимизация была применена к переменной parent , а затем и к параметру node .

Заведомо ложная ветка if(0) < .. >убрана, заведомо истинная – оставлена.

То же самое будет с условиями в других конструкциях, например a = true ? c : d превратится в a = c .

Код после return удалён как недостижимый.

Переписывание синтаксических конструкций

  • Конструкция while переписана в for .
  • Конструкция if (i) . переписана в i&&. .
  • Конструкция if (cond) . else . была переписана в cond ? . : . .

Инлайнинг функций

Инлайнинг функции – приём оптимизации, при котором функция заменяется на своё тело.

Читать еще:  Java lang illegalstateexception ora 20001

После оптимизации (переводы строк также будут убраны):

  • Вызовы функций createMessage и showElement заменены на тело функций. В данном случае это возможно, так как функции используются всего по разу.
  • Эта оптимизация применяется не всегда. Если бы каждая функция использовалась много раз, то с точки зрения размера выгоднее оставить их «как есть».

Инлайнинг переменных

Переменные заменяются на значение, если оно заведомо известно.

Переменная isVisible заменена на true , после чего if стало возможным убрать.

Переменная hi заменена на строку.

Казалось бы – зачем менять hi на строку? Ведь код стал ощутимо длиннее!

…Но всё дело в том, что минификатор знает, что дальше код будет сжиматься при помощи gzip. Во всяком случае, все правильно настроенные сервера так делают.

Алгоритм работы gzip заключается в том, что он ищет повторы в данных и выносит их в специальный «словарь», заменяя на более короткий идентификатор. Архив как раз и состоит из словаря и данных, в которых дубликаты заменены на идентификаторы.

Если вынести строку обратно в переменную, то получится как раз частный случай такого сжатия – взяли «Привет вам из JavaScript» и заменили на идентификатор hi . Но gzip справляется с этим лучше, поэтому эффективнее будет оставить именно строку. Gzip сам найдёт дубликаты и сожмёт их.

Плюс такого подхода станет очевиден, если сжать gzip оба кода – до и после минификации. Минифицированный gzip-сжатый код в итоге даст меньший размер.

Разные мелкие оптимизации Кроме основных оптимизаций, описанных выше, есть ещё много мелких:

  • Убираются лишние кавычки у ключей
  • Упрощаются простые вызовы Array/Object
  • …И ещё некоторые другие мелкие изменения кода…

Подводные камни

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

Библиотека Minify – работа с CSS и JavaScript

Здравствуйте, друзья! Два года назад я рассказывал о сжатии JavaScript, а в прошлый раз затронул тему оптимизации CSS. И вот настало время, когда можно объединить знания, накопленный опыт и двигаться дальше.

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

Сжимая CSS и JS различными онлайн инструментами мы несомненно получаем плюс к производительности сайта, даже можем объединить файлы для снижения http запросов, но все эти действия приводят к условно большим затратам труда… Пришло время раскрыть карты и предложить Вам более универсальное решение — пользоваться библиотекой Minify для минимизации, объединения файлов и их кэширования.

Наглядный пример, взятый со страницы проекта на Google Code, демонстрирующий результаты использования библиотека Minify, из которого видно насколько сократилось число http запросов к серверу и уменьшился размер отправленных данных:

Используя возможности Minify Вам больше не нужно беспокоиться за наличие пустых строк, пробелов, комментариев и прочего лишнего кода, замедляющего загрузку сайта — код будет оставаться читаемым и удобным для редактирования, в то время как посетителям он будет отдаваться в компактном сжатом виде.

Подключение и использование библиотеки Minify

Перехожу к основному вопросу — как пользоваться скриптом Minify. Для начала необходимо скачать архив с последней версией на этой странице. Затем сохранить папку /min/ , находящуюся в архиве, на сервер в корневую директорию сайта.

Теперь практически все готово. Осталось заменить стандартные вызовы файлов css и js на минимизированные скриптом. Приведу пример, на нем проще понять. В файле header.php нахожу строку с указанием файла стилей:

и заменяю ее на:

Параметр f отвечает за относительный путь к файлу, который необходимо минимизировать. Если необходимо задействовать несколько файлов, то их следует разделять запятой:

В качестве помощника Вы можете использовать Minify URI Builder на своем сайте, после распаковки архива он будет расположен по адресу: ../min/builder/ . Для того чтобы включить Builder необходимо в папке /min/ найти файл config.php и найти в нем строку:

Обратите внимание, по-умолчанию он отключен! Для задействования необходимо заменить значение false на true . Для доступа Вам потребуется пароль, задается он в этом же файле, в строке:

Смените пароль на свой, если намерены активировать Minify URI Builder. Логин для входа — admin.

Подключать сжатие с таким помощником еще проще — достаточно указать путь к файлу в текстовом поле, при необходимости добавить еще несколько кнопкой Add file+

Затем после нажатия Update получите ссылки, которыми следует заменить исходные:

Обратите внимание, в своем примере я не стал использовать атрибут type, потому что в HTML5 он является не обязательным и его можно исключить для упрощения и сокращения исходного кода.

Плагин Better WordPress Minify и его особенности

Для тех кто не особо хорошо разбирается в HTML рекомендуется установить плагин для ВордПресс BWP Minify, использующий данную библиотеку. После активации он объединяет и сжимает JS, CSS файлы для ускорения загрузки страницы.

Раньше у меня был установлен плагин WP-Minify, однако он давно не обновлялся и более не поддерживается автором, пришлось удалить.

Better WordPress Minify работает аналогично, перехватывая на странице JS/CSS файлы, минимизирует их, а затем подключает объединенные скрипты и стили в заголовке WordPress. Основные особенности:

  • простая интеграция библиотеки Minify на блог;
  • минимизация JavaScript, CSS и HTML;
  • встроенные средства отладки для поиска неисправностей;
  • возможность подключения дополнительных JS и CSS файлов, требующих сжатия;
  • возможность исключения определенных JS и CSS файлов, не требующих сжатия;
  • оптимизированные файлы могут быть размещены там, где вы хотите;
  • поддержка сжатия внешних файлов с помощью кэширования;
  • заголовки Expire для JS и CSS файлов;
  • обнаружение и устранение повторяющихся файлов.

Все настройки Вы найдете на странице плагина, подробнее на них останавливаться не стану, так как в них нет ничего сложного и зачастую заданные по умолчанию параметры уже приносят ощутимый эффект.

Неважно какой Вы выберите метод, будь то прямое подключение библиотеки Minify на сайт или установка плагина BWP-Minify — в любом случае подобная оптимизация положительно скажется на быстродействии сайта, ускорении загрузки страниц. Желаю успехов, до скорой встречи на Блоге Свободного Вебмастера!

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector
×
×