[npm]편하게 css 파일에 벤더프리픽스(vendor prefix) 추가하기 autoprefixer 사용법!

>>npm init 

npm을 시작한다

 

 

 

필요한건 아래와 같으니 설치해준다.

const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
var fs = require('fs');

 

>> npm install autoprefixer

>> npm install postcss

>> npm install fs

 

 

 

 

 

아래와 같이 index.js 파일을 생성 

const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
var fs = require('fs');

var cssfile="";
//css를 저장할 변수 선언 

fs.readFile('변경할 css 경로' , 'utf8', function(error, data){
    if(error){throw error}
    console.log("sucees!");
    cssfile=data;
    //적어준 경로의 css 를 읽어와서 변수에 저장 
});

 setTimeout(function(){
 //읽어오는데 시간이 걸리므로 지연시간을 준다. 

     postcss([ autoprefixer ]).process(cssfile).then(result => {
       result.warnings().forEach(warn => {
         console.warn(warn.toString())
       })
       //cssfile(읽어온파일을 저장한변수)를 autoprefixer를 이용해 벤더프리픽스를 붙이도록 한다. 
       
       
       console.log(result.css)
       
       //변환된 결과를 다시 파일로 저장(resultfile.css이름으로 저장하라고 지정)
       fs.writeFile('resultfile.css',result.css, function(error, data){
         if(error){throw error}
     });
     })
 },200);

 

작성한 js파일을 실행한다 

 

>> node index.js

 

resultfile.js파일이 생성된것을 확인할 수 있다.