Question

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

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

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

至于缩小甚至连接CSS，我至今无法做到这一点！

对于grunt CSS模块，我尝试使用consolidate-css，grunt-css＆amp; 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');

};

总而言之，我需要两个问题的帮助：

如何将文件夹/public/css/下的所有css文件连接并缩小为一个文件，例如main.min.css
为什么grunt.js会继续添加到concat.js下的连接和缩小的javascript文件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 1.x设置构建过程的帮助，请参阅我的开源项目Grunt.js Skeleton。

从Grunt 0.4.x移至Grunt 1.x should not introduce many major changes。

Answer 1

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

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

Answer 2

我想在这里提一个非常非常有趣的技术，它被用于jQuery和Modernizr这样的大型项目中，用于连接事物。

这两个项目都完全用requirejs模块开发（你可以在他们的github repos中看到），然后他们使用requirejs优化器作为一个非常聪明的连接器。有趣的是，正如你所看到的，还没有现代化器需要在需要的jj上工作，这也是因为它们为了摆脱代码中的requirejs而删除了requirejs的合成仪式。因此，他们最终得到了一个使用requirejs模块开发的独立库！由于这一点，他们能够执行其库的cutom构建，以及其他优点。

对于那些对使用requirejs优化器进行连接感兴趣的人，请查看this post

还有一个小工具可以抽象出过程的所有样板：AlbanilJS

Answer 3

我同意上述答案。但这是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;
    });
  });
};

Answer 4

您不需要添加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']
        }
      }
    }

Answer 5

我认为可能更自动，咕噜咕噜的任务usemin小心翼翼地为你做所有这些工作，只需要一些配置：

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

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

5 个答案: