1. 程式人生 > >整理原始CSS程式碼的小工具

整理原始CSS程式碼的小工具

從網頁上F12看到的連結,所對應的CSS程式碼是不是雜亂無章,讓你無從下手呢。這個小工具可以幫你把你要一個一個回車才能很好看清的程式碼瞬間變得整潔無比,讓你一眼就找到你的class

1.效果:

整理前:

原始CSS.png 整理後: 整理後.png

2.使用工具:node

3.原理:遇到 } 就換行

4.程式碼:

//betterFile.js
var fs=require("fs");
var data=fs.readFileSync('test.css');
var txt=data.toString();
txt=txt.replace(/\}/g,'}\n');
fs.writeFile('test.css',txt,function(err){
  if(err){
    return console.log(err);
  }
  console.log('寫入成功!');
});

5.使用方法

  • 新建一個資料夾(test),新建js檔案(betterFile.js),將程式碼拷貝至js檔案中
  • 將需要修正的CSS檔案(test.css)放入資料夾中
  • 改寫程式碼:將第三行,第六行的“test.css”改成你的CSS檔名字
  • 執行node :

cd 資料夾路徑 node betterFile.js