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

Question

注意:此问题仅与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 不应该引入许多重大变化.

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: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

内置最小任务使用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优化器进行连接感兴趣的人,请查看这篇文章

还有一个小工具可以抽象出过程的所有样板: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;
    });
  });
};