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

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

我目前正试图使用​​Grunt.js来设置一个自动构建过程，首先连接，然后缩小CSS和JavaScript文件。

我已经能够成功连接和缩小我的JavaScript文件，虽然每次我运行grunt它似乎只是附加到文件，而不是覆盖它们。

至于缩小或者甚至连接CSS，我已经不能这样做了！

关于grunt CSS模块，我试过使用consolidationate-css，grunt-css& cssmin但无济于事。不能让我的头如何使用他们！

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

> app.js
> grunt.js
> /public/index.html
> / public / css / [varIoUs css files]
> / 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');

};

所以只是总结我需要帮助两个问题：

>如何连接和缩小所有我的css文件在/ public / css /文件夹下一个文件，说main.min.css
>为什么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 should not introduce many major changes。

解决方法

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类似。

将默认任务更改为

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

现在，运行grunt将产生你想要的结果。

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