CSS 파일을 프리픽스 지원 및 최적화하기 위해서는 Grunt를 사용할 수 있습니다. Grunt는 자바스크립트 기반의 태스크 러너로, 다양한 작업을 자동화할 수 있습니다.
먼저, 프리픽스를 지원하기 위해서는 Autoprefixer라는 Grunt 플러그인을 설치해야 합니다. 이 플러그인은 벤더프리픽스를 자동으로 추가해주는 기능을 제공합니다. Grunt 플러그인을 설치하기 위해서는 아래의 명령어를 사용하세요:
npm install grunt-autoprefixer --save-dev
설치가 완료되면, Gruntfile.js라는 파일을 생성하고 아래와 같이 설정해야 합니다:
module.exports = function(grunt) {
grunt.initConfig({
autoprefixer: {
options: {
browsers: ['last 2 versions', 'ie 8', 'ie 9']
},
your_target: {
src: 'path/to/your/css/file.css'
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', ['autoprefixer']);
};
위의 예제에서 your_target 부분은 자신이 설정한 목표의 이름으로 바꿔주어야 합니다. src 속성에는 프리픽스를 지원하고자 하는 CSS 파일의 경로를 설정합니다. browsers 속성에서는 웹 브라우저의 버전을 지정할 수 있습니다.
이제, 명령어 창에서 아래의 명령어를 입력하여 CSS 파일을 프리픽스 처리할 수 있습니다:
grunt
또한, CSS 파일을 최적화하기 위해서는 UglifyCSS라는 Grunt 플러그인을 추가로 설치해야 합니다. 이 플러그인은 CSS 파일을 압축하고 불필요한 공백과 주석을 제거해주는 기능을 제공합니다. 설치는 아래의 명령어로 수행합니다:
npm install grunt-contrib-uglifycss --save-dev
Gruntfile.js 파일을 아래와 같이 수정해야 합니다:
module.exports = function(grunt) {
grunt.initConfig({
autoprefixer: {
options: {
browsers: ['last 2 versions', 'ie 8', 'ie 9']
},
your_target: {
src: 'path/to/your/css/file.css'
}
},
uglifycss: {
your_target: {
files: {
'path/to/your/minified/css/file.css': ['path/to/your/css/file.css']
}
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-uglifycss');
grunt.registerTask('default', ['autoprefixer', 'uglifycss']);
};
위의 예제에서 your_target 부분은 이전과 같이 자신이 설정한 목표의 이름으로 바꿔주어야 합니다. files 속성에서는 최적화된 CSS 파일을 저장할 경로를 설정합니다.
이제 명령어 창에서 grunt 명령어를 실행하면, 프리픽스가 적용된 후 최적화된 CSS 파일이 생성됩니다.
참고 자료: