다음 단계가 있습니다.
1. 새로운 프로젝트 BEJ를 만듭니다
2. 새 파일 package.json을 만듭니다
3. 새 파일 생성 gruntfile.js
4. 명령 줄에서 grunt 작업을 실행하십시오
1. 새로운 프로젝트 bejs
소스 코드는 SRC에 배치되며 디렉토리에는 두 개의 하위 디렉터 자산과 JS가 있습니다. JS는 이전 기사에서 합병하고 압축하는 방법에 대해 논의한 selector.js 및 ajax.js를 분산시킵니다. 이 기사는 일부 사진 및 CSS 파일이 포함 된 자산 디렉토리에만 중점을 둡니다. 한동안 두 개의 CSS 리소스 재설정 .CSS 및 Style.CSS는 합병되어 DEST/Asset 디렉토리로 압축됩니다. 병합 버전 All.css, 압축 버전 all-min.css.
2. 새 package.json을 만듭니다
package.json은 루트 디렉토리에 배치되며 그 의미는 이전 기사에서 소개되었습니다. 현재 프로젝트 구조는 다음과 같습니다
package.json 컨텐츠는 다음과 같이 JSON 구문 사양을 준수해야합니다.
코드 사본은 다음과 같습니다.
{
"이름": "bejs",
"버전": "0.1.0",
"devddependencies": {
"Grunt": "~ 0.4.0",
"Grunt-Contrib-Concat": "~ 0.1.1",
"Grunt-CSS": "> 0.0.0"
}
}
Grunt-Contrib-Concat의 이전 기사가 소개되었습니다. Grunt-CSS는이 기사에서 사용할 플러그인입니다.
현재 명령 줄 도구를 열고 프로젝트 루트 디렉토리를 입력하고 다음 명령을 입력하십시오. NPM 설치
루트 디렉토리를 확인하고 4 개의 하위 디렉터를 포함하여 추가 Node_Modules 디렉토리가 있는지 확인하십시오.
3. 새 파일 생성 gruntfile.js
Gruntfile.js는 프로젝트 루트 디렉토리에도 배치됩니다. 거의 모든 작업 이이 파일에 정의되어 있습니다. JSSON 대신 JS 코드를 작성할 수있는 일반적인 JS 파일입니다. package.json과 마찬가지로 소스 코드와 같은 SVN 또는 GIT에 제출해야합니다.
소스 코드는 다음과 같습니다
코드 사본은 다음과 같습니다.
module.exports = function (grunt) {
// 구성
grunt.initconfig ({
pkg : grunt.file.readjson ( 'package.json'),
콘서트 : {
CSS : {
src : [ 'src/asset/*. css'],
DEST : 'DEST/ASSET/ALL.CSS'
}
},
CSSMIN : {
CSS : {
SRC : 'Dest/Asset/All.css',
DEST : 'DEST/ASSET/ALL-MIN.CSS'
}
}
});
// 합병 및 압축을 위해 CONCAT 및 CSS 플러그인을로드
grunt.loadnpmtasks ( 'grunt-contrib-concat');
grunt.loadnpmtasks ( 'grunt-css');
// 기본 작업
grunt.registertask ( 'default', [ 'concat', 'cssmin']);
};
4. Grunt 작업을 실행하십시오
명령 줄을 열고 프로젝트 루트 디렉토리를 입력하고 Grunt를 클릭하십시오.
인쇄 정보에서 성공적인 병합 및 압축이 생성되고 Dest 디렉토리와 예상 파일이 생성되는 것으로 나타났습니다. 현재 프로젝트 디렉토리에 더 많은 것이 있습니다.
이 시점에서 CSS 병합 및 압축이 완료됩니다.