如何使用 Grunt.js (0.3.x) 连接和缩小多个 CSS 和 JavaScript 文件

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 任务

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

内置 min 任务使用 UglifyJS，因此您需要替换。我发现 grunt-css 非常好。安装后，将其加载到您的 grunt 文件中

grunt.loadNpmTasks('grunt-css');

然后设置它

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

请注意，用法类似于内置的 min。

将您的 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 repos 中看到），然后他们使用 requirejs 优化器作为一个非常智能的连接器。有趣的是，正如您所见，无论是 jQuery，Modernizr 都不需要 requirejs 才能工作，这是因为他们删除了 requirejs 语法仪式，以摆脱代码中的 requirejs。所以他们最终得到了一个使用 requirejs 模块开发的独立库！多亏了这一点，他们能够执行库的 cutsom 构建，以及其他优势。

对于所有对使用 requirejs 优化器进行串联感兴趣的人，请查看 this post

还有一个小工具可以抽象出流程的所有样板：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']
        }
      }
    }

---

我认为可能更自动化，grunt task usemin 会为您完成所有这些工作，只需要一些配置：

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

---