Cách nối và rút gọn nhiều tệp CSS và JavaScript với Grunt.js (0.3.x)

Lưu ý: Câu hỏi này chỉ liên quan đến Grunt 0.3.x và đã được để lại để tham khảo. Để được trợ giúp với bản phát hành Grunt 1.x mới nhất, vui lòng xem bình luận của tôi bên dưới câu hỏi này.

Tôi hiện đang cố gắng sử dụng Grunt.js để thiết lập quy trình xây dựng tự động để nối đầu tiên và sau đó rút gọn các tệp CSS và JavaScript.

Tôi đã có thể nối và rút gọn các tệp JavaScript của mình thành công, mặc dù mỗi lần tôi chạy, nó dường như chỉ thêm vào tệp thay vì ghi đè chúng.

Đối với CSS thu nhỏ hoặc thậm chí nối, tôi vẫn chưa thể làm điều này!

Trong điều kiện của module CSS grunt Tôi đã cố gắng sử dụng consolidate-css, grunt-cssvà cssminnhưng vô ích. Tôi không thể hiểu được cách sử dụng chúng!

Cấu trúc thư mục của tôi như sau (là một ứng dụng node.js điển hình):

• app.js
• grunt.js
• /public/index.html
• / public / css / [các tệp css khác nhau]
• / public / js / [các tệp javascript khác nhau]

Đây là tệp grunt.js của tôi hiện trông như thế nào trong thư mục gốc của ứng dụng của tôi:

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

};

Vì vậy, chỉ để tóm tắt, tôi cần trợ giúp với hai câu hỏi:

1. Cách nối và rút gọn tất cả các tệp css của tôi trong thư mục /public/css/thành một tệp, giả sửmain.min.css
2. Tại sao grunt.js tiếp tục thêm vào các tệp javascript được nối và rút gọn concat.jsvà concat.min.jsbên dưới /public/js/thay vì ghi đè chúng mỗi khi gruntchạy lệnh ?

Cập nhật ngày 5 tháng 7 năm 2016 - Nâng cấp từ Grunt 0.3.x lên Grunt 0.4.x hoặc 1.x

Grunt.jsđã chuyển sang cấu trúc mới trong Grunt 0.4.x(tệp hiện được gọi Gruntfile.js). Vui lòng xem dự án mã nguồn mở Grunt.js Skeleton của tôi để được trợ giúp thiết lập quy trình xây dựng Grunt 1.x.

Chuyển từ Grunt 0.4.xsang Grunt 1.x không nên đưa ra nhiều thay đổi lớn .

concat.js đang được bao gồm trong các concattệp nguồn của tác vụ public/js/*.js. Bạn có thể có một tác vụ xóa concat.js(nếu tệp tồn tại) trước khi nối lại, chuyển một mảng để xác định rõ ràng tệp nào bạn muốn nối và thứ tự của chúng hoặc thay đổi cấu trúc dự án của bạn.

Nếu làm theo cách sau, bạn có thể đặt tất cả các nguồn ./srccủa mình và các tệp đã tạo của bạn dưới./dest

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

Sau đó, thiết lập của bạn concat nhiệm vụ

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

Nhiệm vụ tối thiểu của bạn

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

Tác vụ min tích hợp sử dụng UglifyJS, vì vậy bạn cần thay thế. Tôi thấy grunt-css là khá tốt. Sau khi cài đặt nó, hãy tải nó vào tệp tin grunt của bạn

grunt.loadNpmTasks('grunt-css');

Và sau đó thiết lập nó

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

Lưu ý rằng cách sử dụng tương tự như min tích hợp sẵn.

Thay đổi defaultnhiệm vụ của bạn thành

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

Bây giờ, chạy gruntsẽ cho kết quả như bạn mong muốn.

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

Tôi muốn đề cập ở đây một kỹ thuật rất, RẤT, rất thú vị đang được sử dụng trong các dự án lớn như jQuery và Modernizr để nối những thứ.

Cả hai dự án này đều được phát triển hoàn toàn bằng các mô-đun requestjs (bạn có thể thấy điều đó trong github repos của họ) và sau đó họ sử dụng trình tối ưu hóa requestjs như một trình ghép nối rất thông minh. Điều thú vị là, như bạn có thể thấy, cả Modernizr và jQuery cũng không cần tới requestjs để hoạt động, và điều này xảy ra bởi vì họ xóa nghi thức cú pháp requestjs để loại bỏ requestjs trong mã của họ. Vì vậy, họ kết thúc với một thư viện độc lập được phát triển với các mô-đun requestjs! Nhờ đó, họ có thể thực hiện các bản dựng cắt ghép thư viện của họ, trong số các lợi thế khác.

Đối với tất cả những người quan tâm đến việc ghép nối với trình tối ưu hóa requestjs, hãy xem bài đăng này

Ngoài ra, có một công cụ nhỏ tóm tắt tất cả các bản soạn sẵn của quy trình: AlbanilJS

Tôi đồng ý với câu trả lời trên. Nhưng đây là một cách nén CSS khác.

Bạn có thể nối CSS của mình bằng cách sử dụng trình nén YUI :

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

Bạn không cần thêm gói concat, bạn có thể thực hiện việc này thông qua cssmin như sau:

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

Và đối với js, hãy sử dụng uglify như thế này:

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

Tôi nghĩ có thể tự động hơn, usemin tác vụ grunt sẽ đảm nhận tất cả các công việc này cho bạn, chỉ cần một số cấu hình:

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