Решение для компиляции S CSS и развертывания на удаленном сервере - PullRequest
Новая
       155

Решение для компиляции S CSS и развертывания на удаленном сервере

0 голосов
/ 05 августа 2020

Нам нужно решение для компиляции S CSS и развертывания на удаленном сервере.

Мы пробовали использовать настройки Grunt и Gulp, но похоже, что плагины FTP для обоих больше не совместим с более новыми версиями Grunt / Gulp.

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

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

Наш идеальный рабочий процесс - это изменить как css файл (JS в ближайшем будущем), фоновая задача увидит изменение, скомпилирует его в css, а другие задачи увидят это и развернут в правильной удаленной папке.

Есть идеи?

Спасибо, Нил

1 Ответ

0 голосов
/ 05 августа 2020

Небольшой пример того, как вы можете перекомпилировать s css в css и загрузить на сервер через ftp структуру папок ниже и обычный вызов node indes.js и все;) 

.
├── index.js
├── output.css
├── package.json
├── style.scss
└── yarn.lock

const fs = require('fs');
const sass = require('node-sass');
const ftp = require("basic-ftp")

const pathTotheFile = './output.css';

// compile scss
sass.render({
  file: __dirname + './style.scss',
  outputStyle: 'compressed',
  outFile: __dirname + pathTotheFile,
  // sourceMap: true,
}, function (error, result) {
  if (error) {
    console.log(error.status);
    console.log(error.column);
    console.log(error.message);
    console.log(error.line);
  } else {

    console.log(result.stats);
    fs.writeFile(pathTotheFile, result.css, function (err) {
      if (!err) {
        uploadCSStoServer();
      }
    })
  }
});

// copy file to server
async function uploadCSStoServer() {
  const client = new ftp.Client()
  client.ftp.verbose = true
  try {
    await client.access({
      host: "myftpserver.com",
      user: "very",
      password: "password",
      secure: true
    })
    console.log(await client.list())
    await client.uploadFrom("README.md", "README_FTP.md")
    // await client.downloadTo("README_COPY.md", "README_FTP.md")
  }
  catch (err) {
    console.log(err)
  }
  client.close()
}
...