자동 빌드 도구 Grunt

요약:
대부분의 프로젝트가 배치되기 전에 해야 할 일은 js, css 파일의 압축, 합병, 그리고 일부 파일의 오류 검사, 심지어 LESS 파일을 css 파일로 변환하고,coffeescript 파일을 js 파일로 변환하는 등이다.그러나 프로젝트 개발은 교체된 것이기 때문에 한 번도 개발을 끝내지 못하면 위의 일을 다시 한 번 해야 한다.그러면 어떤 도구가 우리가 이런 중복된 일을 하는 것을 도울 수 있습니까?Grunt는 그 중에서 매우 유용한 도구이다.다음은 그런트를 배워보겠습니다.
설치:
Grunt 기반node.js이므로 먼저 설치node.js하고 설치하면 아래 명령만 실행하면 Grunt를 설치할 수 있습니다.
npm install -g grunt-cli
매개 변수 g는 전역 설치를 나타내고 grunt-cli는 grunt의 명령행 인터페이스를 나타낸다.
설치가 완료되면, Grunt를 시스템 경로로 설정하여, 디렉터리에서 실행할 수 있도록 합니다.설치가 완료된 후에는 작업을 수행할 수 없습니다. Grunt는 모듈 기구를 기반으로 하기 때문에 모듈을 설치해야 합니다.모듈은 부분적인 것으로 프로젝트 수요에 따라 설치된 것이다.프로젝트의 아무 디렉터리나 (루트 디렉터리나 디렉터리를 만들 수도 있음) 새 파일 ---package.json(node init를 통해서도 작성할 수 있음) 내용은 다음과 같습니다.

{

    "name": "",            //     

    "version": "",         //     

    "private": true,       //       

    "description": "",     //      

    "main": "",            //       

    "dependencies": {},    //        

    "devDependencies": {   //            

        "grunt": "0.x.x",  // grunt      0.x.x 

        "grunt-contrib-clean": "~0.5.0", // clean     0.5.0

        "grunt-contrib-copy": "~0.5.0",

        "grunt-contrib-less": "~0.11.0",

        "grunt-contrib-uglify": "~0.4.0",

        "grunt-contrib-watch": "~0.6.1",

        "grunt-contrib-concat": "*"

    },

    "keywords": [],   //      

    "author": {       //   

        "name": "",

        "age": ""

    },

    "contributors": [],  //     

    "license": ""        //   

}

 
 
그리고 현재 디렉터리에서 명령 단말기를 통해 npm install를 실행하면 node 가 하나 더 있는 것을 발견할 수 있습니다modules 폴더, 안에 우리가 설치한 모듈이 있습니다.
구성:
Grunt와 모듈이 모두 설치되었습니다. 다음에 해야 할 일은 Grunt가 어디로 가야 하는지, 그리고 무엇을 해야 하는지 알려주는 프로필을 만드는 것입니다.위 디렉터리에 Gruntfile 파일을 새로 만듭니다.js(대소문자 주의) 내용은 다음과 같습니다.

module.exports = function(grunt) {

  

  'use strict';



  //   Grunt       

  grunt.initConfig({

    clean:  {

      oldMinFiles: [],

      afterUglify: []

    },

    jslint: {

      command: "",

      options: ""

    },

    concat: {



    },

    uglify: {



    },

    watch:  {



    },

    copy: {



    },

    less: {



    }

  });



  //  node_modules        

  grunt.loadNpmTasks('grunt-contrib-copy');

  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.loadNpmTasks('grunt-cmd-concat');

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

  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.loadNpmTasks('grunt-contrib-watch');



  //     

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

  grunt.registerTask('check', ['jslint']);



};

 
 
현재 디렉토리에서 명령만 실행하면 됩니다.
파일을 병합하려면 다음과 같이 하십시오.
grunt concat
코드 검사:
grunt check 
 
후기에 grunt의 모든 모듈을 소개할 것이다.
부록:
 
grunt.initConfig
각 모듈의 매개 변수를 설정하고 항목마다 같은 이름의 모듈에 대응합니다.
grunt.loadNpmTasks
필요한 모듈을 로드합니다.
grunt.registerTask
구체적인 임무를 정의하다.첫 번째 파라미터는 작업 이름이고 두 번째 파라미터는 하나의 수조로 이 작업이 순서대로 사용해야 하는 모듈을 나타낸다.default는 기본 작업입니다. grunt 명령을 직접 입력하고, 뒤에는 인자가 없습니다. 이 때 호출된 모듈은default에 대응하는 작업입니다.