Как запретить генерацию карт кода css.map

03 декабря 2019

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

Во-первых, что это за карты кода

Карты кода (sourcemaps) связывают компилированный и минифицированный код с исходным и отображают его в точном соответствии. В веб-разработке обычно встречается в JS и CSS. Поддерживается в Chrome DevTools, именно в нем можно видеть исходный некомпилированный Less и Sass.

Файлы имеют те же имена, что и скомпилированный CSS, но к нему добавляется расширение .map. Например, у stylesheet.css карта кода будет в stylesheet.css.map

На боевых сайтах подключать карты кода ни к чему. Поэтому, возникает вопрос:

Как запретить генерацию карт кода

Например, для Sass они легко отключаются через терминал. В зависимости от реализации это делается так:

Для ruby-sass и node-sass:

sass --sourcemap=none --watch stylesheet.scss:stylesheet.css

Для dart-sass используем —no-source-map:

sass --no-source-map --watch stylesheet.scss:stylesheet.css

Как сделано у меня

Я не запрещаю генерацию карт кода, потому что они мне часто бывают нужны и на боевых сайтах. Я пользуюсь Sublime Text 3 с расширением SFTP. Чтобы запретить загрузку карт на сервер, я просто в конфиге проекта запрещаю синхронизацию файлов с расширением map.

Открываем sftp-config.json, в конце ignore_regexes ставим запятую и дописываем «\\.map»

"ignore_regexes": [
    "\\.sublime-(project|workspace)", 
    "sftp-config(-alt\\d?)?\\.json",
    "sftp-settings\\.json",
    "/venv/", 
    "\\.svn/", 
    "\\.hg/", 
    "\\.git/",
    "\\.bzr", 
    "_darcs", 
    "CVS", 
    "\\.DS_Store", 
    "Thumbs\\.db", 
    "desktop\\.ini", 
    "\\.map"
],

А чтобы в консоли не было 404-й ошибки в некоторых браузерах «Failed to load resource: the server responded with a status of 404 ()», в скомпилированном файле можно убрать эту строчку:

/*# sourceMappingURL=stylesheet.css.map */

Таким образом, карта будет включена, но на сервере не будет никаких упоминаний о ней.

Иван Данилин
Автор Иван Данилин

Фулстек веб‑разработчик, специализируюсь на платформе WordPress

Подробнее
Комментарии
Добавить комментарий