Grunt 실천 의 간단 한 튜 토리 얼

예전 에는 자신 이 너무 낮 아서 높 은 전단 자동화 포장 도 구 를 사용 한 적 이 없고 개발 방식 도 전통 적 인 편 이 었 다.새로운 팀 에 가입 한 후에 필사적으로 따라 잡 아야 합 니 다. 전단 기술 의 교체 가 너무 빠 르 고 각종 기술 이 끊임없이 나타 나 서 아 이 큐 가 거의 부족 합 니 다.남 들 이 모두 쓰 는 강압 적 인 기술 을 보면, 자신 은 여전히 지 키 고 있다.
그 정도 의 소 백 기술 은 말 이 안 되 기 때문에 어떤 환경 은 너 를 발전 시 키 고 어떤 환경 은 너 로 하여 금 자신 도 모 르 게 타락 하 게 한다.쓸데없는 소리 하지 말고 공 부 를 시작 해라.
1. Grunt 의 설치
Grunt 는 Nodejs 환경 에 의존 하기 때문에 설치 하기 전에 nodejs 를 설치 해 야 합 니 다. 어떻게 설치 하 는 지 에 대해 많은 튜 토리 얼 이 있 고 원 키 로 설 치 된 설치 패키지 가 있어 설치 과정 이 비교적 쉽 습 니 다.여기에 Nodejs 가 설치 되 어 있 습 니 다.
CMD 에 명령 을 입력 하면 Grunt 를 설치 할 수 있 습 니 다. 쉽 죠?

npm install -g grunt-cli

2. Grunt 항목 새로 만 들 기
새 파일 이름 을 만 듭 니 다. 이름 은 마음대로 정 합 니 다. 제 가 만 든 grunttest。이 파일 아래 에 두 개의 파일 을 새로 만 듭 니 다. 하 나 는 package. json 이 고 하 나 는 Gruntfile. js 입 니 다. 일반적으로 이 두 파일 은 필수 입 니 다.
package.json：

{
  "name": "grunt_test",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-sass": "*",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-requirejs": "latest",
    "grunt-contrib-htmlmin": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-copy": "latest",
    "grunt-usemin": "latest",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "grunt-cssc": "*",
    "grunt-htmlhint": "*",
    "matchdep": "*"
  },
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "huzhao",
  "license": "ISC"
}

name 은 당신 의 grunt 프로젝트 이름 입 니 다. 개발 한 프로젝트 이름 이 아 닙 니 다.devDependencies 는 말 그대로 의존 이라는 뜻 입 니 다. Grunt 에는 많은 플러그 인 이 있 습 니 다. 많은 절차 의 실현 은 플러그 인 에 의존 합 니 다. devDependencies 는 필요 한 플러그 인 을 열거 하 는 것 입 니 다.
3. 플러그 인 다운로드
package. json 에는 많은 플러그 인 이 열거 되 어 있 습 니 다. 사용 할 때 그들 을 다운로드 하고 grunt 항목 에 들 어가 명령 에 입력 해 야 합 니 다.

npm --install

위의 명령 은 필요 한 플러그 인 을 로 컬 에 다운로드 합 니 다. 이때 grunt 프로젝트 에 많은 파일 이 생 겼 습 니 다.
4、Gruntfile.js
기본 적 인 모든 실현 은 이 문서 에 있 기 때문에 가장 중요 하 다.

module.exports = function(grunt) { // Do grunt-related things in here };

이것 은 용기 이 므 로 모든 내용 방법 을 안에 써 야 한다.
초기 화:

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

pkg  package.json，       。

uglify     js   ，           。

//       "uglify"     。
grunt.loadNpmTasks('grunt-contrib-uglify');

사용자 정의 작업:

grunt.registerTask('default', ['uglify']);

기본 값 은 default 입 니 다. 즉, grunt 프로젝트 에서 명령 창 을 열 어 입력 하 십시오. grunt 는 실행 할 수 있 습 니 다. 여기 서도 다른 이름 으로 바 꿀 수 있 습 니 다. 보통 개발 에 대응 하 는 프로젝트 이름 입 니 다. 예 를 들 어 gruntprocject, 그러면 실행 할 때 입력: grunt gruntproject。
간단 한 전체 코드:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */
'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['concat', 'uglify']);

};