GruntJS_javascript 기술을 사용하여 여러 JavaScript 파일을 연결하고 압축하는 과정에 대한 자세한 설명

원형 차트, 꺾은선형 차트, 분산형 차트, 상자 차트 및 히스토그램을 지원할 수 있는 간단한 HTML5 Canvas 차트 라이브러리를 작성했습니다. 또한 마우스 프롬프트, 그리기 프로세스 애니메이션 효과 등도 지원합니다. 마지막으로 여러 개의 JS 파일을 하나의 JS 파일로 변환하여 게시하고 싶습니다. 그래서 제 질문은 이 JS 파일을 하나로 변환하는 방법입니다. 그룹의 친구가 나에게 GruntJS – JavaScript 다중 파일 컴파일, 스타일 검사라고 말했습니다. , 아티팩트를 연결하고 압축합니다. Google에서 많은 검색을 한 끝에 마침내 이 작업을 완료하는 데 도움이 되었습니다. 이제 시작하고 그 과정을 공유하고 싶습니다.

하나: GruntJS란 무엇인가
영어로 번역하기 싫으면 그냥 웹사이트에서 직접 읽어보세요 ->http://gruntjs.com/
둘: 설치 및 운영
공식 튜토리얼에는 명확하지 않으며 처음 보는 사람들에게는 약간 혼란스럽다고 나와 있습니다. 요약하자면, GruntJS
는 node.js 서버를 기반으로 하며 이에 의존합니다. 따라서 첫 번째 단계는 node.js를 다운로드하고 설치하는 것입니다. 다운로드 주소는
http://nodejs.org/download/

두 번째 단계: grunt 명령줄 도구를 실행하고 설치하는 것입니다. grunt 명령
은 Windows 명령줄 창(npm install -g grunt-cli)에서만 실행할 수 있습니다. 더 구체적인 설명은 여기를 참조하세요: http://gruntjs.com/getting-started

3단계: 프로젝트의 루트 디렉터리에 project.json과 Gruntfile.js라는 두 개의 파일을 만듭니다.
그런트 작업으로 인해 실행되는 작업은 이 두 파일에 따라 달라집니다.
project.json 파일을 생성하는 방법은 명령줄을 통해 얻을 수 있습니다: nmp init project.json을 만들었습니다
내용은 다음과 같습니다:

코드 복사 코드는 다음과 같습니다:

{
"name": "fishchart",
"version": "0.0.1 ",
"description": " html5 캔버스 차트 라이브러리",
"author": "zhigang",
"license": "BSD",
"devDependency": {
" grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-jshint": "~0.6.2",
" grunt-contrib-concat": "~0.3 .0"
}
}

만들기 명령어를 사용할 때 무엇을 써야 할지 모르겠다면 Enter만 누르면 됩니다. 건너 뛰다.

3: Grunt 플러그인을 설치하고 사용하여 자바스크립트 파일 연결 및 압축 완료
1. 자바스크립트 파일 링크 플러그인 지원 설치
npm install grunt-contrib-concat --save-dev
2. 자바스크립트 파일 압축 플러그인 지원 설치
npm install grunt-contrib-uglify --save-dev
3. Gruntfile.js 파일에서 옵션 구성, 작업 로드 및 정의

코드 복사 코드는 다음과 같습니다.

module.exports = function(grunt) {
grunt .initConfig({
/ /JSHint 옵션
jshint: {
all: ['main.js'] //lint에 대한 파일
},
//연결 옵션
concat: {
options: {
separator: ';' //스크립트를 구분합니다
},
dist: {
src: ['js/*.js', 'js/ **/*.js'] , //연결할 스크립트에 대한 미니 매치
dest: 'js/fishchart_v0.0.1.js' //스크립트 출력 위치
}
},
//우리의 uglify 옵션
uglify: {
js: {
files: {
'js/fishchart_v0.0.1.js': ['js/fishchart_v0.0.1.js'] / /새로 생성된 스크립트 위에 저장
}
}
}
})
//작업 로드
grunt.loadNpmTasks('grunt-contrib-jshint')
grunt.loadNpmTasks('grunt -contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 실행할 기본 작업
// grunt.registerTask(' default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('development', ['jshint'])
grunt.registerTask('production', ['jshint ', 'concat', 'uglify']);
}

4: 연산 결과

마지막으로 이건 엄지손가락을 치켜세우고 싶다. 정말 유용해요!