Grunt는 css를 개별적으로 압축하여 min.css 파일을 생성합니다.

3276 단어 nodejsgrunt
1. node를 설치합니다.js
2. 새 패키지.json 파일
{
  "name": "demo",
  "version": "2.0.1",
  "author":"",
  "email":"",
  "webAddr":"",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-cmd-transport": "~0.3.0",  
    "grunt-cmd-concat": "~0.2.5",  
    "grunt-contrib-concat":"*",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-requirejs": "~0.4.1",  
    "grunt-contrib-copy":"*",
    "grunt-contrib-cssmin":"*",  
    "grunt-strip": "~0.2.1" 
  }
}

3. 그리고 grunt에 필요한 패키지를 설치한다.
cmd : npm install

4. Gruntfile을 만듭니다.js
module.exports = function (grunt) {
    var version = 2.0;
    //       
    grunt.initConfig({

        //  package.json   ,   json  
        pkg: grunt.file.readJSON('package.json'),
        //  css
        cssmin: {
            //        
		  main:{
            options: {
                 banner: '/*!webAddr:, author:, email:, version:v-:'+version+' */
', paths:["css"], // beautify: { // ascii , ! ascii_only: true } }, files: [ { expand: true, // cwd: 'css/', src: ['*.css','!*.min.css'], dest: 'css/', ext:".min.css" } ] } } }); // grunt.loadNpmTasks('grunt-contrib-cssmin'); // grunt.registerTask('default', ['cssmin']); };

grunt.initConfig 메서드 설명
모듈 설정에 사용되며, 하나의 대상을 매개 변수로 받아들인다.이 대상의 구성원은 사용하는 동명 모듈과 일일이 대응한다.
각 대상에 대한 구체적인 설정은 템플릿의 문서를 참조해야 합니다.cssmin의 경우 minify 대상에 대한 매개변수의 구체적인 의미는 다음과 같습니다.
expand:true로 설정하면 다음 파일 이름의 자리 차지 문자 (즉 * 번호) 를 구체적인 파일 이름으로 확장합니다
cwd: 처리해야 할 파일 (input) 이 있는 디렉터리입니다
src: 처리해야 할 파일을 나타냅니다.만약 그룹 형식을 사용한다면, 그룹의 모든 항목은 하나의 파일 이름이며, 어댑터를 사용할 수 있다
dest: 처리된 파일 이름이나 디렉터리를 표시합니다
ext: 처리된 파일의 접미사 이름을 표시합니다. 
grunt 일반 함수 설명:
grunt.initConfig: 모든 구성원 항목이 같은 이름의 모듈에 대응하는 다양한 모듈의 매개 변수를 정의합니다.grunt.loadNpmTasks: 작업을 완료하는 데 필요한 모듈을 로드합니다.grunt.registerTask: 특정 작업을 정의합니다.첫 번째 파라미터는 작업 이름이고 두 번째 파라미터는 하나의 수조로 이 작업이 순서대로 사용해야 하는 모듈을 나타낸다. 
grunt 일반 모듈:
grunt-contrib-clean: 파일을 삭제합니다
grunt-contrib-compass:compass를 사용하여sass 파일을 컴파일합니다
grunt-contrib-concat: 파일을 병합합니다
grunt-contrib-copy: 파일을 복사합니다
grunt-contrib-cssmin: CSS 파일을 압축 및 병합합니다
grunt-contrib-imagemin: 이미지 압축 모듈입니다
grunt-contrib-jshint: JavaScript 구문을 확인합니다
grunt-contrib-uglify: JavaScript 파일을 압축하고 병합합니다
grunt-contrib-watch: 파일의 변동을 감시하고 해당하는 동작을 합니다

좋은 웹페이지 즐겨찾기