nodejs 에서 javascript 및 css minifier
connect-assetmanager
제일 잘 만들어 졌다고 한다. 좀더 써봐야 알겠지만..
app.js 같은 기본 파일에서 추가하는게 좋고, 뭐 물론 모듈로 만들어서 require 해도 되지만
간략하게 날코딩 하자면
먼저
$ npm install connect-assetmanager
$ npm install connect-assetmanager-handler (optional이지만, preManipulate 나 post Manipulate 를 이용 하려면 역시 설치 하시오.)
var assetManager = require('connect-assetmanager');
var assetHandler = require('connect-assetmanager-handlers');
먼더 라이브러리를 불러오고
var assetManagerGroups = {
'[js 그룹명]': {
'route': [regular expresstion]
, 'path': '해당 js 폴더'
, 'dataType': 'javascript'
, 'files': [ 파일명 Array ]
}
, '[ css 그룹명 ]': {
'route': [regular expresstion]
, 'path': '해당 css 폴더'
, 'dataType': 'css'
, 'files': [ 파일명 Array ]
, 'preManipulate': {
// Regexp to match user-agents including MSIE.
'MSIE': [
assetHandler.yuiCssOptimize
, assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
, assetHandler.stripDataUrlsPrefix
],
// Matches all (regex start line)
'^': [
assetHandler.yuiCssOptimize
, assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
, assetHandler.replaceImageRefToBase64(root)
]
}
}
};
그룹명은 그냥 text. 슬래쉬 문자도 먹힌다. 구분하기 편하려면 이런점도 이용하면 좋을듯
route 는 정규 표현식을 지원한다.
일단은 위에 코드는 preManipulate 만 테스트 해본건데, postMenipulate 이용해서 uglify 하는 짓도 가능하다.
일단 json 만들었으면, middleware 추가합시다.
var assetsManagerMiddleware = assetManager(assetManagerGroups);
app.configure(function(){
app.use("/", assetsManagerMiddleware, express.static(root));
}
추가가 되었다. configure는 환경에 맞게 바꾸면 되고
jade 에서 이용하거나 html에서 불러올때는
간단하게 src='/the/[그룹명]/[route]' 로 불러 오면된다.
document path 말고 url 도 지원하니깐 오픈소스 프로젝트에 있는 놈들도 불러다 minify 할 수 있지만, 괜히 그런짓은 하지말자, 특별히 로딩될 스크립트가 너무 많지 않은이상.. 쓸데 없는 트래픽 낭비이므로,,, 뭐 가벼운 파일이면 머지 하는게 물론 당연히 좋다.
