Как запретить генерацию карт кода css.map
Недавно спрашивали, как при компиляции CSS запретить генерацию карт кода. Рассказываю, как это делается, как делаю я и зачем вообще это нужно.
Во-первых, что это за карты кода
Карты кода (sourcemaps) связывают компилированный и минифицированный код с исходным и отображают его в точном соответствии. В веб-разработке обычно встречается в JS и CSS. Поддерживается в Chrome DevTools, именно в нем можно видеть исходный некомпилированный Less и Sass.
Файлы имеют те же имена, что и скомпилированный CSS, но к нему добавляется расширение .map. Например, у stylesheet.css карта кода будет в stylesheet.css.map
На боевых сайтах подключать карты кода ни к чему. Поэтому, возникает вопрос:
Как запретить генерацию карт кода
Например, для 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
Подробнее-
точно также делаю