Grunt는 css를 개별적으로 압축하여 min.css 파일을 생성합니다.
2. 새 패키지.json 파일
{
"name": "demo",
"version": "2.0.1",
"author":"",
"email":"",
"webAddr":"",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-cmd-transport": "~0.3.0",
"grunt-cmd-concat": "~0.2.5",
"grunt-contrib-concat":"*",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy":"*",
"grunt-contrib-cssmin":"*",
"grunt-strip": "~0.2.1"
}
}
3. 그리고 grunt에 필요한 패키지를 설치한다.
cmd : npm install
4. Gruntfile을 만듭니다.js
module.exports = function (grunt) {
var version = 2.0;
//
grunt.initConfig({
// package.json , json
pkg: grunt.file.readJSON('package.json'),
// css
cssmin: {
//
main:{
options: {
banner: '/*!webAddr:, author:, email:, version:v-:'+version+' */
',
paths:["css"],
//
beautify: {
// ascii , !
ascii_only: true
}
},
files: [
{
expand: true,
//
cwd: 'css/',
src: ['*.css','!*.min.css'],
dest: 'css/',
ext:".min.css"
}
]
}
}
});
//
grunt.loadNpmTasks('grunt-contrib-cssmin');
//
grunt.registerTask('default', ['cssmin']);
};
grunt.initConfig 메서드 설명
모듈 설정에 사용되며, 하나의 대상을 매개 변수로 받아들인다.이 대상의 구성원은 사용하는 동명 모듈과 일일이 대응한다.
각 대상에 대한 구체적인 설정은 템플릿의 문서를 참조해야 합니다.cssmin의 경우 minify 대상에 대한 매개변수의 구체적인 의미는 다음과 같습니다.
expand:true로 설정하면 다음 파일 이름의 자리 차지 문자 (즉 * 번호) 를 구체적인 파일 이름으로 확장합니다
cwd: 처리해야 할 파일 (input) 이 있는 디렉터리입니다
src: 처리해야 할 파일을 나타냅니다.만약 그룹 형식을 사용한다면, 그룹의 모든 항목은 하나의 파일 이름이며, 어댑터를 사용할 수 있다
dest: 처리된 파일 이름이나 디렉터리를 표시합니다
ext: 처리된 파일의 접미사 이름을 표시합니다.
grunt 일반 함수 설명:
grunt.initConfig: 모든 구성원 항목이 같은 이름의 모듈에 대응하는 다양한 모듈의 매개 변수를 정의합니다.grunt.loadNpmTasks: 작업을 완료하는 데 필요한 모듈을 로드합니다.grunt.registerTask: 특정 작업을 정의합니다.첫 번째 파라미터는 작업 이름이고 두 번째 파라미터는 하나의 수조로 이 작업이 순서대로 사용해야 하는 모듈을 나타낸다.
grunt 일반 모듈:
grunt-contrib-clean: 파일을 삭제합니다
grunt-contrib-compass:compass를 사용하여sass 파일을 컴파일합니다
grunt-contrib-concat: 파일을 병합합니다
grunt-contrib-copy: 파일을 복사합니다
grunt-contrib-cssmin: CSS 파일을 압축 및 병합합니다
grunt-contrib-imagemin: 이미지 압축 모듈입니다
grunt-contrib-jshint: JavaScript 구문을 확인합니다
grunt-contrib-uglify: JavaScript 파일을 압축하고 병합합니다
grunt-contrib-watch: 파일의 변동을 감시하고 해당하는 동작을 합니다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Node.js를 AWS서버에서 사용하는 실습간단한 예제와 함께 AWS에서 Node.js를사용하는 법을 배워보도록 하겠다. 해당 github에 있는 레포지토리로 사용을 할 것이다. 3000번 포트로 Listen되는 예제이고 간단히 GET, POST, DELET...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.