Быстрое копирование сайта с помощью плагина website-scraper

24 июня 2020

Копирование сайта с помощью Website Scraper — https://www.npmjs.com/package/website-scraper.

Запускаем консоль в нужной директории и устанавливаем плагин website-scraper с помощью команды:

npm install website-scraper

Создаем файл scraper.js с примерно таким содержимым:

const scrape = require('website-scraper');
const options = {
  urls: ['http://nodejs.org/'],
  directory: '/path/to/save/'
};
 
// with async/await
const result = await scrape(options);
 
// with promise
scrape(options).then((result) => {});
 
// or with callback
scrape(options, (error, result) => {});

urls — адрес исходного сайта, который нужно скопировать, может быть несколько страниц.

directory — обязательно указать название директории, в которую будет скопирован сайт, при этом создавать ее не нужно, иначе будет ошибка, website-scraper сам создаст данный каталог.

Затем в консоли выполняем команду node scraper.js и получаем скопированный сайт в указанной папке.

В случае возникновения ошибок, например, ReferenceError: require is not defined in ES module scope, you can use import instead используйте такой код для подключения модуля:

import scrape from 'website-scraper';

Простой пример рабочего варианта с сообщением об ошибке, если что-то пошло не так:

var scrape = require('website-scraper');
var options = {
  urls: ['http://site.com/'],
  directory: 'html',
};

// with promise
scrape(options).then((result) => {
  /* some code here */
  console.log('done');
}).catch((err) => {
  /* some code here */
  console.log('error');
});

// or with callback
scrape(options, (error, result) => {
  /* some code here */
});

Чтобы скачать несколько страниц:

urls: ['http://site.com/', 'http://site.com/about.html', 'http://site.com/services.html'],

Но они скачаются в формате index.html, index_1.html, index_2.html, при этом еще и не по порядку из массива.

Поэтому лучше при скачивании нескольких страниц указывать им имена:

urls: [
  {url: 'http://site.com/', filename: 'index.html'},
  {url: 'http://site.com/about.html', filename: 'about.html'},
  {url: 'http://site.com/services.html', filename: 'services.html'}
],

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

И еще один пример, как поменять директории для файлов стилей, скриптов, картинок, шрифтов или файлов html.

Просто добавляем в options такие правила:

subdirectories: [
    {directory: 'img', extensions: ['.jpg', '.jpeg', '.png']},
    {directory: 'fonts', extensions: ['.eot', '.svg', '.ttf', '.woff', '.woff2', '.svg']},
    {directory: 'js', extensions: ['.js']},
    {directory: 'css', extensions: ['.css']},
    {directory: 'page', extensions: ['.html']}
]

Таким образом все файлы будут раскиданы по кастомным папкам. Это не обязательно указывать, так как website-scraper и так раскидывает все по папкам, а файлы html помещает в корень. Но это может быть необходимо, если на проекте нужно использовать нестандартные названия для каталогов или поместить все файлы html в отдельную директорию.

По итогу, если использовать все выше описанное, то получится такой рабочий код:

var scrape = require('website-scraper');
var options = {
  urls: [
  {url: 'http://site.com/', filename: 'index.html'},
  {url: 'http://site.com/about.html', filename: 'about.html'},
  {url: 'http://site.com/services.html', filename: 'services.html'}
  ],
  subdirectories: [
  {directory: 'img', extensions: ['.jpg', '.jpeg', '.png', '.svg', '.ico']},
  {directory: 'fonts', extensions: ['.eot', '.ttf', '.woff', '.woff2']},
  {directory: 'js', extensions: ['.js']},
  {directory: 'css', extensions: ['.css']},
  {directory: 'page', extensions: ['.html']}
  ],
  directory: 'html'
};

// with promise
scrape(options).then((result) => {
  /* some code here */
  console.log('done');
}).catch((err) => {
  /* some code here */
  console.log('error');
});

// or with callback
scrape(options, (error, result) => {
  /* some code here */
});

Как добавить эффект свечения (тень) для SVG при наведении

Простой пример, как добавить эффект свечения для svg-элемента с помощью добавления тени. Итак, у нас…

Анимированная светящаяся при наведении кнопка с помощью CSS

Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и…

Пакетная оптимизация картинок для Google Page Speed Insight

Репозиторий с оптимизатором картинок на Github — https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для…

Сжатие и конвертирование видео для сайта

Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео…

Ответить