Инструменты для создания адаптивного сайта без доступа к сайту

[Nappsel]

Спасибо за полезную информацию, возьму на вооружение.

[Roggragg]

Если есть вопросы, могу дополнить статью скриншотами или подробнее рассмотреть какой-то пункт.

[ivan386]

Что такое «неинвазивные стили»? Ну и хотелось бы примерчик css или sass.

[Roggragg]

Переименовал статью, неудачное было название. Такого термина не существует в этой сфере.

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

[monochromer]

Для подобных целей использую browser-sync. Его можно использовать для внешнего сайта как прокси и инжектить стили и скрипты из локальной папки.

[Roggragg]

Browser-sync хорош, и вообще его использую в основном. Но тут уже надо npm иметь и конфиг сделать. А как именно вставлять стили и скрипты из локальной папки?

[monochromer]

Вот мой простейший конфиг:

let browserSync = require('browser-sync').create();

browserSync.init({
    proxy: 'http://site.com',
    serveStatic: ['static'],
    files: ['static/**/*.*'],
    rewriteRules: [
        {
            match: /<\/head>/i,
            fn: (req, res, match) => `<link rel="stylesheet" href="/custom.css" />`
        },
        {
            match: /<\/body>/i,
            fn: (req, res, match) => `<script async src="/scripts.js"></script>`
        }
    ]
});

В serveStatic указываем из какой папки брать файлы. В rewriteRules пишем где в html и какие файлы вставлять.

[Roggragg]

Спасибо, дополнил статью

[Roggragg]

Может кому-то надо адаптировать ужасный сайт, ради развлечения сделаю. Но сайт должен быть максимально ужасным — чтобы было веселее. Внизу статьи написал дополнение.

[vilya_ya]

Или можно использовать PHPStorm/WebStorm с их плагином LiveEdit (инструкция).

[Roggragg]

Можете подробнее рассказать как это работает? Желательно скриншот с настройками. Если это быстро и уже есть этот софт то хорошее решение, добавлю в статью.