Grunt 초보 자 가이드

머리말
자바 백 엔 드 에서 전면 으로 전환 할 준 비 를 하고 있 는 사람 으로서 js 의 세계 에서 Maven 이나 gradle 과 유사 한 것 이 있 는 지 항상 생각 하고 있 었 습 니 다. 그리고 grunt 라 는 것 을 찾 았 습 니 다.
그런 트 는 뭐 하 는 거 예요?
예 를 들 어 ant, maven, gradle, make 와 같은 것 입 니 다. 그러면 우 리 는 왜 이런 도 구 를 배 워 야 합 니까? 우 리 는 IDE 로 프로 그래 밍 하 는 것 이 좋 지 않 습 니까? 사람 으로 하여 금 이런 도 구 를 배우 게 하려 면 반드시 이 도구 가 우 리 를 위해 무엇 을 해결 할 수 있 는 원인 이 있어 야 합 니 다.
Grunt 원인 선택

우리 의 파일 의존 관리

원 하 는 대로 일괄 처리 임무

자주 사용 하 는 전단 도구, js 혼동, 파일 통합 압축 을 통합 합 니 다.

이렇게 많은 말 을 했 습 니 다. 위 에 우리 가 왜 grunt. js 를 우리 프로젝트 구축 의 도구 로 선택해 야 하 는 지 입 니 다. 만약 에 프로젝트 구축 의 개념 이 없다 면 나 는 grunt 와 관련 된 어떠한 자료 도 보지 말 라 고 건 의 했 습 니 다. 본 고 를 포함 합 니 다. 왜냐하면 당신 은 내 가 다음 에 쓸 것 을 이해 하지 못 하고 grunt 와 관련 된 자 료 를 이해 하지 못 하기 때문에 시간 을 낭비 하지 마 세 요.
그런 트 일 시 켜.
만약 에 구축 도 구 를 접 한 적 이 있 거나 프로젝트 구축 개념 이 있다 면 임무 (tasks) 라 는 개념 을 이해 하 는 데 큰 어려움 이 없 을 것 입 니 다.
우리 첫 번 째 퀘 스 트 만 들 기
우리 Gruntfile. js 파일 에 이렇게 몇 마디 만 쓰 면

module.exports = function (grunt) {grunt.registerTask('test', 'my first tasks', function () {grunt.log.write('Hello World!').ok();
    });
}

이어서 우 리 는 현재 디 렉 터 리 에서 실행 하기 만 하면 된다 grunt test콘 솔 출력 을 볼 수 있 습 니 다.
Hello World.
이제 우리 node 환경 이 있 으 면 하고 싶 은 대로 할 수 있어. 그만 해!만약 단지 이렇다 면, 이것 은 우리 가 셸 스 크 립 트 를 쓰 는 것 과 어떤 차이 가 있 습 니까?실제로 grunt 는 셸 스 크 립 트 와 별 차이 가 없습니다. 다만 grunt 는 node 실행 환경 이 있 습 니 다. 셸 스 크 립 트 를 쓰 는 것 보다 간단 할 수 있 습 니 다. 만약 당신 이 셸 스 크 립 트 의 달인 이 라면 grunt 를 더 이상 배 울 필요 가 없다 고 생각 합 니 다.
과업
때때로, 우 리 는 많은 임무 가 있 지만, 이 임 무 는 모두 하나 로 분류 할 수 있다. 우 리 는 여러 가지 임 무 를 등록 해서 이런 상황 을 처리 해 야 한다. 예 를 들 어, 파일 의 조작 은, 생 성, 열기, 이름 을 바 꿀 수 있다. 이런 임 무 는 모두 파일 조작 임무 로 분류 할 수 있다.

module.exports = function (grunt) {
  grunt.initConfig({
    file: {
      create: 'source file',
      open: 'open file',
      delete: 'delete file'}
});
  grunt.registerMultiTask('file', 'Log stuff.', function () {grunt.log.writeln(this.target + ': ' + this.data);
  });
}

이때 우리 가 운행 할 때 아래 의 인 터 페 이 스 를 볼 수 있다.grunt file:create
create: ‘source file’ grunt file:open
open: ‘open file’ grunt file:delete
delete: ‘delete file’
그러면 우리 가 다 중 작업 을 사용자 정의 할 때 this.target 를 통 해 현재 작업 명령 을 받 은 다음 this.data 을 통 해 우리 의 설정 치 를 얻 을 수 있 습 니 다. 다음은 상상력 을 발휘 할 때 입 니 다.
총결산
실제로 grunt 는 신기 한 것 이 아 닙 니 다. node 에서 실행 되 는 명령 행 도구 일 뿐 입 니 다. js 로 스 크 립 트 를 쓰 는 데 편리 할 뿐 입 니 다.
플러그 인 추천

grunt-contrib-watch

감청 문서 수정

grunt-curl

curl 원 격 js 다운로드

grunt-contrib-clean

파일 정리 도구

grunt-contrib-cssmin

css 압축 도구

grunt-contrib-copy

파일 복잡 도구

generated by haroopad