postcss

by uiwwnw

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>autoMigration</title>
  <style>
    body {
      width: 500px;
      margin: auto;
      font-size: 18px;
    }

    label span {
      display: block;
      margin-top: 20px;
    }

    label {
      display: block;
    }

    input {
      display: block;
      width: 100%;
      font-size: 20px;
    }

    label.tag {
      display: none;
    }

    .sndSlt {
      display: none;
    }

    div.html {
      display: none;
    }

    div.css {
      display: none;
    }

    body.add .tag {
      display: block;
    }

    body.del .con {
      display: block;
    }

    body.html .html ,
    body.html .sndSlt {
      display: block;
    }

    body.css label ,
    body.css .tag {
      display: none;
    }
    body.css .file {
      display: block;
    }

  </style>
</head>

<body class="html add">
  <form action="/" method="get">
    <select name="language" id="slt2">
      <option value="html" selected>html</option>
      <option value="css">css</option>
    </select>
    <select name="type" id="slt" class="sndSlt">
      <option value="add" selected>추가</option>
      <option value="edit">수정</option>
      <option value="del">삭제</option>
    </select>
    <div>
      <label class="file">
        <span>파일명</span>
        <input type="file" placeholder="xxx.html or yyy.scss or zzz.ejs" name="file"> </label>
      <label class="tag">
        <span>태그</span>
        <input type="text" placeholder="태그명을 입력하세요" name="tag"> </label>
      <label>
        <span>속성</span>
        <input type="text" placeholder="속성을 입력하세요" name="attr"> </label>
      <label class="con">
        <span>속성내용</span>
        <input type="text" placeholder="속성에 대체될 내용을 입력하세요" name="con"> </label>
    </div>
    <button>전송</button>
  </form>
  <script>
    var body = document.body;
   ...

JavaScript

var http = require('http');
var fs = require('fs');
var url = require('url');
var querystring = require('querystring');




// 2. 비동기방식의 파일읽기. 파일을 읽은 후 마지막 파라미터에 넘긴 callback 함수가 호출
// fs.readFile('home.js', 'utf-8', function(error, data) {
//   console.log('01 readAsync: %s', data);
// });

// // 3. 동기방식의 파일읽기. 파일을 읽은 후 data 변수에 저장
// var data = fs.readFileSync('home.js', 'utf-8');
// console.log('02 readSync: %s', data);




// // 1. 새로 생성할 파일에 입력될 문자열
// var data = 'My first data...\r\nhello there!';

// // 2. 비동기 방식으로 파일을 생성. 함수의 인자는 앞에서 부터 순서대로 파일명, 입력데이터, 인코딩, 콜백함수
// fs.writeFile('file01_async.txt', data, 'utf-8', function(e) {
//   if (e) {
//     // 3. 파일생성 중 오류가 발생하면 오류출력
//     console.log(e);
//   } else {
//     // 4. 파일생성 중 오류가 없으면 완료 문자열 출력
//     console.log('01 WRITE DONE!');
//   }
// });

// // 5. 동기방식은 callback 함수를 통한 오류처리를 할 수 없기 때문에 함수전체를 try 문으로 예외처리
// try {
//   // 6. 동기 방식으로 파일을 생성. 함수의 인자는 앞에서 부터 순서대로 파일명, 입력데이터, 인코딩
//   fs.writeFileSync('file02_sync.txt', data, 'utf-8');
//   console.log('02 WRITE DONE!');
// } catch (e) {
//   console.log(e);
// }

// 2. http 모듈로 서버를 생성한다.
//    아래와 같이 작성하면 서버를 생성한 후, 사용자로 부터 http 요청이 들어오면 function 블럭내부의 코드를 실행해서 응답한다.
var server = http.createServer(function(request, response) {
  var parsedUrl = url.parse(request.url);
  var parsedQuery = querystring.parse(parsedUrl.query, '&', '=');
  var resource = parsedUrl.pathname;
  var opt = {};
  opt.language = parsedQuery.language;
  opt.file = parsedQuery.file;
  opt.type = parsedQuery.type;
  opt.tag = parsedQuery.tag;
  opt.attr = parsedQuery.attr;
  opt.con = parsedQuery.con === undefined?'':parsedQuery.con;
  if (opt.con === 'none') {
    opt.con = '#';
  }
  if (opt.file) {
    fs.readFile(opt.file, 'utf-8', function(error, data) {
      if (!error) {
        if (opt.language === 'html') {
          if (opt.type === 'add') {
            fs.writeFileSync(opt.file, findTag(data, opt), 'utf-8');
          } else {
            fs.writeFileSync(opt.file,...