[javascript] Grunt.js (0.3.x)로 여러 CSS 및 JavaScript 파일을 연결하고 축소하는 방법

참고 :이 질문은 Grunt 0.3.x에만 해당되며 참조 용으로 남겨졌습니다. 최신 Grunt 1.x 릴리스에 대한 도움말은이 질문 아래의 내 의견을 참조하십시오.

현재 Grunt.js를 사용하여 CSS 및 JavaScript 파일을 먼저 연결 한 다음 축소하기위한 자동 빌드 프로세스를 설정하려고합니다.

내가 grunt를 실행할 때마다 파일을 덮어 쓰는 대신 파일에 추가하는 것처럼 보이지만 JavaScript 파일을 성공적으로 연결하고 축소 할 수있었습니다.

축소 또는 연결 CSS에 관해서는 아직이 작업을 수행 할 수 없었습니다!

툴툴 거리는 소리 CSS 모듈의 측면에서 내가 사용하는 시도 consolidate-css, grunt-css및 cssmin하지만 아무 소용. 그것들을 사용하는 방법에 대해 내 머리를 이해할 수 없었습니다!

내 디렉토리 구조는 다음과 같습니다 (일반적인 node.js 응용 프로그램).

• app.js
• grunt.js
• /public/index.html
• / public / css / [다양한 CSS 파일]
• / public / js / [다양한 자바 스크립트 파일]

내 응용 프로그램의 루트 폴더에있는 내 grunt.js 파일은 다음과 같습니다.

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

요약하자면 두 가지 질문에 대한 도움이 필요합니다.

1. 폴더 아래의 모든 CSS 파일 /public/css/을 하나의 파일 로 연결하고 축소하는 방법main.min.css
2. grunt.js 가 명령 이 실행될 때마다 덮어 쓰는 대신 연결되고 축소 된 javascript 파일 concat.js과 concat.min.js아래 에 계속 추가하는 이유는 무엇 입니까?/public/js/grunt

2016 년 7 월 5 일 업데이트 됨-Grunt 0.3.x에서 Grunt 0.4.x 또는 1.x로 업그레이드

Grunt.js의 새 구조로 이동했습니다 Grunt 0.4.x(이제 파일 이름은 Gruntfile.js). .NET 용 빌드 프로세스 설정에 대한 도움말 은 내 오픈 소스 프로젝트 Grunt.js Skeleton 을 참조하세요 Grunt 1.x.

에서 Grunt 0.4.x로 이동하는 Grunt 1.x 것은 많은 주요 변경 사항을 도입해서는 안됩니다 .

답변

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

grunt.loadNpmTasks('grunt-css');

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

grunt.registerTask('default', 'concat min cssmin');

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
}; 

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }