Grunt 정적 파일 압축,버 전 관리 패키지 의 인 스 턴 스 설명

이야기 하기 전에 대략적인 절 차 를 이야기 합 니 다.nodejs 설치->전역 설치 grunt->프로젝트 생 성 package.json-->프로젝트 설치 grunt 및 grunt 플러그 인->설정 Gruntfile.js->작업 실행
1.노드 설치
우리 가 시작 하기 전에 Nodejs 를 설치 해 야 합 니 다.설치 되 어 있 지 않 으 면전송 문
설치 가 끝 난 후 설치 가 성공 적 으로 되 었 는 지 확인 하 는 것 은 정상 적 인 힌트 입 니 다.

여기 서 npm 를 타 오 바 오의 cnpm,속도 철봉 으로 바 꾸 는 것 을 권장 합 니 다.
설치 명령:
npm install cnpm -g -registry= https://registry.npm.taobao.org

2.전역 그런 트 설치
설치 명령:
cnpm install grunt -g

3.프로젝트 생 성 package.json
프로젝트 루트 디 렉 터 리 에 package.json 파일 을 만 듭 니 다.파일 내용 은 다음 과 같 습 니 다.

4.프로젝트 에 grunt 및 grunt 플러그 인 설치
우리 에 게 필요 한 플러그 인
플러그 인 이름
설명 하 다.
Github 주소
grunt-contrib-clean
파일 과 폴 더 비우 기
https://github.com/gruntjs/grunt-contrib-clean
grunt-contrib-copy
파일 과 폴 더 복사
https://github.com/gruntjs/grunt-contrib-copy
grunt-contrib-concat
연결,병합 파일(사용 되 지 않 음)
https://github.com/gruntjs/grunt-contrib-concat
grunt-contrib-cssmin
(CSS 파일)압축
https://github.com/gruntjs/grunt-contrib-cssmin
grunt-contrib-uglify
(JS 파일)압축
https://github.com/gruntjs/grunt-contrib-uglify
grunt-filerev
파일 내용 hash(MD5)(버 전 번호 제어)
https://github.com/yeoman/grunt-filerev
grunt-usemin
파일 참조 수정
https://github.com/yeoman/grunt-usemin
load-grunt-tasks
oad-grunt-tasks
https://github.com/sindresorhus/load-grunt-tasks
우 리 는 프로젝트 폴 더 를 열 고 경로 표시 줄 에 cmd 를 입력 한 다음 차 로 돌아 갑 니 다.

리 턴 인터페이스

명령 행 창 을 열 고 설치 명령 을 입력 하 십시오:
cnpm install grunt grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks --save-dev

5.Gruntfile.js 설정(이것 은 중점,중점,중점 입 니 다.중요 한 이 야 기 를 세 번 한다.)
먼저 제 설정 을 붙 이 고 나중에 천천히 설명 하 겠 습 니 다.

module.exports = function (grunt) {
 require('load-grunt-tasks')(grunt);

 var path = {
  src : 'test',
  dest : 'dist',
 }

 grunt.initConfig({
  path : path,
  clean : {//       
   beforebuild : {
    files : [{
      src : ['<%= path.dest %>/']
     }
    ]
   }
  },
  filerev : {// css js     
   build : {
    files : [{
      src : ['<%= path.dest %>/**', 
      '!<%= path.dest %>/page/*.html',//html       
      '!<%= path.dest %>/**/*.{png,jpg,jpeg}']//          
     }
    ]
   }
  },
  useminPrepare : {//  concat、cssmin、uglify
   build : {
    files : [{     
      src : '<%= path.src %>/page/*.html'
     }
    ],
    
   }
  },
  usemin : {//  html  css js  
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   }
  },
  copy : {//    
   build : {
    files : [{
      expand : true,// true  cwd,src,dest  
      cwd : '<%= path.src %>/',//  src                 （       ）
      src : ['**/*.*'],//   cwd       。     src/**/*.*，  src      
      dest : '<%= path.dest %>/'//        。
     }
    ]
   }
  },
  cssmin :{
   build : {
    files : [{
      expand : true,// true  cwd,src,dest  
      cwd : '<%= path.src %>/',//  src                 （       ）
      src : ['css/*.css'],//   cwd       。     src/**/*.css，  src    css  
      dest : '<%= path.dest %>/'//        。
     }
    ]
   }
  },
  uglify :{
   build : {
    files : [{
      expand : true,// true  cwd,src,dest  
      cwd : '<%= path.src %>/',//  src                 （       ）
      src : ['js/*.js'],//   cwd       。     src/**/*.js，  src    js  
      dest : '<%= path.dest %>/'//        。
     }
    ]
   }
  },
 });
 grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);
};

우리 앞 에는 줄곧 이것 을 설치 하고 저것 을 설치 하고 있 는데,설 치 된 이 물건 들 을 어떻게 사용 합 니까?
우선 우 리 는 grunt 입문 을 통 해 플러그 인 을 어떻게 사용 하 는 지 알 게 되 었 습 니 다.이것 은 홈 페이지 의 예 입 니 다.

pkg 는 package.json 을 읽 어서 생 성 된 json 대상 입 니 다.
uglify 는 grunt-contrib-uglify 가 지정 한 작업 이름 입 니 다.플러그 인 마다 해당 하 는 작업 이름 이 있 습 니 다.해당 하 는 github 에서 볼 수 있 습 니 다.
grunt.loadNpmTasks('grunt-contrib-uglify'); 'uglify'작업 을 제공 할 수 있 는 플러그 인 을 불 러 옵 니 다.
grunt.registerTask('default', ['uglify']); 별명 퀘 스 트 등록,이 별명 퀘 스 트 는 퀘 스 트 목록 에 대응 합 니 다.
grunt 별명 을 통과 할 때 실제 목록 의 작업 을 수행 하고 순서대로 수행 합 니 다.
이런 기본 적 인 정 보 는 모두 홈 페이지 를 통 해 볼 수 있다.
우 리 는 정적 파일 을 압축 하고 정적 파일 에 버 전 번 호 를 추가 해 야 하 며 정적 파일 을 참조 하 는 html 나 css 는 모두 파일 이름 을 수정 해 야 합 니 다.우리 의 수 요 는 명확 한 후에 우리 가 어떻게 하 는 지 보 러 와 야 합 니 다.
첫 번 째 단계:우 리 는 다시 포장 해 야 합 니 다.그러면 파일 을 복사 해 야 합 니 다.그래서 우 리 는 grunt-contrib-copy 플러그 인 이 필요 합 니 다.
복사 하기 전에 원본 파일 과 대상 파일 을 확인 해 야 합 니 다.원본 파일 은 test 폴 더 에 있 고 대상 파일 은 dist 폴 더 에 있 습 니 다.

파일 경로 만 들 기

var path = {
  src : 'test',
  dest : 'dist',
 }

파일 경로 가 만 들 어 졌 습 니 다.copy 를 보 겠 습 니 다.

copy : {//    
   build : {
    files : [{
      expand : true,// true  cwd,src,dest  
      cwd : '<%= path.src %>/',//  src                 （       ）
      src : ['**/*.*'],//   cwd       。     src/**/*.*，  src      
      dest : '<%= path.dest %>/'//        。
     }
    ]
   }
  },

코드 주석 에서 하나,둘 을 볼 수 있 습 니 다.cwd,src,dest 를 말씀 드 리 겠 습 니 다.
사실 이곳 의 원본 경 로 는 cwd+src 입 니 다.이것 이 야 말로 진정한 원천 경로 다.dest 는 대상 경로 접두사 입 니 다.
src 아래 의 모든 파일 을 src 폴 더 에 있 는 파일 을 dest 폴 더 에 복사 한 다 는 뜻 입 니 다.복사 할 구체 적 인 폴 더 나 파일 형식 을 지정 할 수 있 습 니 다.
두 번 째 단계:파일 압축 을 진행 합 니 다.저 는 js 와 css 압축 만 대상 으로 하고 img 의 압축 에 대해 해당 하 는 플러그 인 을 볼 수 있 습 니 다.생각 은 모두 같 습 니 다.
css 압축 은 grunt-contrib-csmin 플러그 인 을 사용 해 야 합 니 다.이 플러그 인 에 대응 하 는 작업 이름 은 cssmin 입 니 다.

cssmin :{
   build : {
    files : [{
      expand : true,// true  cwd,src,dest  
      cwd : '<%= path.src %>/',//  src                 （       ）
      src : ['css/*.css'],//   cwd       。     src/**/*.css，  src      
      dest : '<%= path.dest %>/'//        。
     }
    ]
   }
  },

js 압축 은 grunt-contrib-uglify 플러그 인 을 사용 해 야 합 니 다.이 플러그 인 에 대응 하 는 작업 이름 은 uglify 입 니 다.

uglify :{
   build : {
    files : [{
      expand : true,// true  cwd,src,dest  
      cwd : '<%= path.src %>/',//  src                 （       ）
      src : ['js/*.js'],//   cwd       。     src/**/*.js，  src      
      dest : '<%= path.dest %>/'//        。
     }
    ]
   }
  },

세 번 째 단계:정적 파일 이름 을 바 꿉 니 다.이 버 전 통 제 는 정적 파일 이름 을 바 꾸 는 것 을 통 해 현실 적 입 니 다.
이름 을 바 꾸 려 면 grunt-filerev 플러그 인 을 사용 해 야 합 니 다.이 플러그 인 에 대응 하 는 작업 이름 은 filerev 입 니 다.

filerev : {// css js     
   build : {
    files : [{
      src : ['<%= path.dest %>/**', 
      '!<%= path.dest %>/page/*.html',//html       
      '!<%= path.dest %>/**/*.{png,jpg,jpeg}']//          
     }
    ]
   }
  },

여 기 는 src 인자 만 있 습 니 다.배열 로 전 달 됩 니 다.css 와 js 의 이름 만 바 꾸 고 싶 습 니 다.다른 파일 은 필요 없습니다.그래서 배열 의 첫 번 째 매개 변 수 는 src/*src 폴 더 의 모든 파일 과 일치 하고 뒤의 두 개 입 니 다!xx
STEP 4:html 에서 css 와 js 의 인용 수정
파일 인용 을 수정 하려 면 grunt-usemin 플러그 인 을 사용 해 야 합 니 다.이 플러그 인 에 대응 하 는 작업 이름 은 usemin 입 니 다.

usemin : {//  html  css js  
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   }
  },

여기 도 src 인자 만 있 습 니 다.html 주 소 를 보 여 줍 니 다.css 가 있다 면 이렇게 쓸 수 있 습 니 다.

usemin : {//  html  css js  
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   },
   css :{
    files : [{
      src : '<%= path.dest %>/css/*.css'
     }
    ]
   }
  },

다섯 번 째 단계:우 리 는 복사,압축,이름 바 꾸 기,인용 수정 에서 한 번 말 했 습 니 다.여 기 는 복사 하기 전에 대상 폴 더 안의 파일 을 삭제 해 야 한 다 는 것 입 니 다.
파일 인용 을 수정 하려 면 grunt-contrib-clean 플러그 인 을 사용 해 야 합 니 다.이 플러그 인 에 대응 하 는 작업 이름 은 clean 입 니 다.

clean : {//       
   beforebuild : {
    files : [{
      src : ['<%= path.dest %>/']
     }
    ]
   }
  },

여기에 도 src 인자 가 하나 밖 에 없어 서 대상 폴 더 의 주 소 를 알려 줍 니 다.
모든 미 션 은 여기까지 만 결제 할 게 요.
우리 등록 임무 별

grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);

보 실 수 있 습 니 다.여 기 는 작업 만 등 록 했 을 뿐 플러그 인 을 사용 하지 않 았 습 니 다.플러그 인 을 추가 하 는 것 은 load-grunt-tasks 플러그 인 을 들 어 본 적 이 있 습 니 다.

require('load-grunt-tasks')(grunt);

이곳 의 지령 은 우리 가 하나하나 쓰 는 것 과 같다.

grunt.loadNpmTasks('xxx');

Gruntfile.js 설정 이 완료 되면 grunt 명령 을 실행 하면 대상 폴 더 에서 필요 한 파일 을 얻 을 수 있 습 니 다.
여기에 몇 가 지 를 보충 설명 한다.
Gruntfile.js 설정 이 완료 되면 grunt 명령 을 실행 하면 대상 폴 더 에서 필요 한 파일 을 얻 을 수 있 습 니 다.
여기에 몇 가 지 를 보충 설명 한다.
이 쓰 기 는 동적 빌 드 파일 대상 입 니 다.

이 쓰 기 는 파일 배열 형식 이다. 

이상 의 Grunt 는 정적 파일 의 압축 에 대해 버 전 관리 패키지 의 인 스 턴 스 설명 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.