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

注意：此问题仅与Grunt 0.3.x有关，已留作参考。有关最新的Grunt 1.x版本的帮助，请参阅此问题下方的我的评论。

我目前正在尝试使用Grunt.js设置自动构建过程，以便首先进行串联，然后最小化CSS和JavaScript文件。

我已经能够成功地串联和最小化我的JavaScript文件，尽管每次运行grunt时，它似乎只是追加到文件中而不是覆盖它们。

至于缩小甚至连接CSS，到目前为止，我还无法做到这一点！

就笨拙的CSS模块而言，我尝试使用consolidate-css，grunt-css＆，cssmin但无济于事。无法理解如何使用它们！

我的目录结构如下（是一个典型的node.js应用程序）：

• app.js
• grunt.js
• /public/index.html
• / public / css / [各种CSS文件]
• / public / js / [各种javascript文件]

这是我的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）。请参阅我的开源项目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任务

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仓库中看到它），然后它们将requirejs优化器用作非常聪明的连接器。如您所见，有趣的是，jQuery和Modernizr都不要求requirejs起作用，这之所以发生，是因为它们擦除了requirejs语法仪式以便在代码中摆脱requirejs。因此，它们最终得到了一个由requirejs模块开发的独立库！因此，他们能够执行自己库的cutsom构建以及其他优势。

对于所有对使用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']
        }
      }
    }

我认为可能会更自动化，而繁琐的任务usemin会为您做好所有这些工作，只需要一些配置即可：

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