grunt 의 입문 실천

grunt 는 nodejs 를 바탕 으로 하 는 전단 프로젝트 관리 도구 로 대량의 우수한 플러그 인 으로 여러 전단 프로젝트 관리 도구 에서 두각 을 나 타 냈 다.
nodejs 를 먼저 설 치 했 는 지 확인 합 니 다.
Grunt 를 편리 하 게 사용 하기 위해 서 는 Grunt 명령 행 인터페이스 (CLI) 를 전역 에 설치 해 야 합 니 다.npm install - g grunt - cli 명령 은 grunt 명령 을 시스템 경로 에 삽입 합 니 다. 그러면 임의의 디 렉 터 리 에서 실행 할 수 있 습 니 다 (임의의 디 렉 터 리 로 이동 하여 grunt 명령 을 실행 합 니 다).
grunt - cli 를 설치 하 는 것 은 grunt 작업 실행 기 를 설치 하 는 것 과 같 지 않 습 니 다. grunt 를 따로 설치 해 야 합 니 다.     npm install -g grunt 
 간단 한 grunt 실천: 1. 지정 한 프로젝트 의 루트 디 렉 터 리 에 들 어가 면 프로젝트 에 두 개의 파일 을 추가 해 야 합 니 다: package. json 과 Gruntfile. js.(Node. js 버 전 >=0.8.0, 두 파일 의 구체 적 인 내용 은 필요 합 니 다)
2. npm install 설치 항목 을 실행 할 때 Grunt 플러그 인 에 의존 합 니 다 (기본적으로 package. json 에 있 는 모든 의존 플러그 인 을 설치 합 니 다).3. grunt (명령) 를 사용 하여 Grunt 관련 작업 을 실행 합 니 다.
간단 한 압축 병합 작업:
Gruntfile.js:

 1 module.exports = function(grunt) {

 2     //   

 3     grunt.initConfig({

 4         pkg : grunt.file.readJSON('package.json'),

 5         concat : {//    

 6             domop : {//  

 7                 src: ['src/jquery.baza.dropSelect.js', 'src/jquery.baza.resumeTag.js'],

 8                 dest: 'dest/domop.js'

 9             },

10             css : {//  

11 

12                 src: ['src/css/*.css'],

13                 dest: 'dest/css/all.css'

14             }

15         },

16         uglify : {

17             options : {

18                 banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'

19             },

20             build : {

21                 src : 'dest/domop.js',

22                 dest : 'dest/domop.min.js'

23             }

24         },

25         cssmin: {

26             css: {

27                 src: 'dest/css/all.css',

28                 dest: 'dest/css/all-min.css'

29             }

30         },

31 

32         jshint:{

33             hint:{

34                 src:['js/test.js']

35             }

36         }

37 

38     });

39     //   concat uglify css  ，         

40     grunt.loadNpmTasks('grunt-contrib-concat');

41     grunt.loadNpmTasks('grunt-contrib-uglify');

42 

43     grunt.loadNpmTasks('grunt-css');

44 

45     grunt.loadNpmTasks('grunt-contrib-jshint');

46 

47     //     

48     grunt.registerTask('default', ['concat', 'uglify','cssmin','jshint']);   

49 }; 

해당 퀘 스 트 의 목표 만 수행 하려 면 퀘 스 트 를 등록 할 때 해당 목 표를 지정 하면 됩 니 다.
grunt.registerTask('concat', ['concat:domop']); //이 작업 은 concat 작업 의 domop 목표 만 수행 합 니 다.
대응 하 는 package. json:

 1 {

 2   "name": "test1",

 3   "version": "0.1.0",

 4   "author": "bossliu",

 5   "homepage": "###",

 6   "devDependencies": {

 7     "grunt": "~0.4.0",

 8     "grunt-contrib-jshint": "*",

 9     "jshint": "^2.5.0",

10     "grunt-contrib-uglify": "~0.1.2",

11     "grunt-contrib-concat": "~0.1.1",

12     "grunt-css":   ">0.0.0"

13   }

14 }

자세 한 문 서 는 grunt 중국어 커 뮤 니 티 를 볼 수 있 습 니 다.http://www.gruntjs.org/docs/getting-started.html