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 것은 많은 주요 변경 사항을 도입해서는 안됩니다 .

concat.js는 concat작업의 소스 파일 에 포함됩니다 public/js/*.js. concat.js다시 연결하기 전에 제거하는 작업 (파일이있는 경우) 을 가질 수 있으며, 배열을 전달하여 연결하려는 파일과 순서를 명시 적으로 정의하거나 프로젝트의 구조를 변경할 수 있습니다.

후자를 수행하는 경우 모든 소스를 아래 ./src에 놓고 빌드 파일을./dest

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'
  }
},

기본 제공 최소 작업은 UglifyJS를 사용하므로 교체가 필요합니다. grunt-css 가 꽤 좋다는 것을 알았습니다 . 설치 후 grunt 파일에로드하십시오.

grunt.loadNpmTasks('grunt-css');

그런 다음 설정

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

사용법은 기본 제공 최소값과 유사합니다.

default작업을 다음으로 변경하십시오.

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

이제 실행 grunt하면 원하는 결과가 생성됩니다.

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

여기서는 jQuery 및 Modernizr와 같은 거대한 프로젝트에서 연결 작업에 사용되는 매우 매우 흥미로운 기술을 언급하고 싶습니다.

이 두 프로젝트는 모두 requirejs 모듈 (github 저장소에서 확인할 수 있음)으로 완전히 개발 된 다음 requirejs 최적화 프로그램을 매우 스마트 한 연결 자로 사용합니다. 흥미로운 점은 보시다시피, Modernizr가 작동하는 데 requirejs를 필요로하지 않는 jQuery도, 코드에서 requirejs를 제거하기 위해 requirejs 구문 의식을 지워서 발생한다는 것입니다. 그래서 그들은 requirejs 모듈로 개발 된 독립형 라이브러리로 끝납니다! 이 덕분에 다른 장점 중에서도 라이브러리의 컷섬 빌드를 수행 할 수 있습니다.

requirejs 최적화 프로그램과의 연결에 관심이있는 모든 사람들은 이 게시물을 확인하십시오.

또한 프로세스의 모든 상용구를 추상화하는 작은 도구가 있습니다. AlbanilJS

위의 답변에 동의합니다. 그러나 여기에 또 다른 CSS 압축 방법이 있습니다.

YUI 압축기 를 사용하여 CSS를 연결할 수 있습니다 .

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;
    });
  });
}; 

concat 패키지를 추가 할 필요가 없습니다. 다음과 같이 cssmin을 통해이 작업을 수행 할 수 있습니다.

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']
        }
      }
    }

그리고 js의 경우 다음과 같이 uglify를 사용하십시오.

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

나는 더 자동적이고 지저분한 작업이 당신을 위해이 모든 작업을 처리하는 데주의를 기울이고 일부 구성 만 필요하다고 생각합니다.

https://stackoverflow.com/a/33481683/1897196