99

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

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

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

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

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

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

  • 应用程序.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 不应 引入 很多 重大 变化.

4

5 回答 5

108

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
于 2012-12-06T17:33:02.797 回答
12

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

这两个项目都是完全用 requirejs 模块开发的（你可以在他们的 github repos 中看到），然后他们使用 requirejs 优化器作为一个非常智能的连接器。有趣的是，正如您所见，无论是 jQuery，Modernizr 都不需要在 requirejs 上工作，这是因为他们删除了 requirejs 语法仪式以摆脱代码中的 requirejs。所以他们最终得到了一个使用 requirejs 模块开发的独立库！多亏了这一点，他们能够执行库的 cutsom 构建，以及其他优势。

对于所有对使用 requirejs 优化器进行连接感兴趣的人，请查看这篇文章

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

于 2014-11-28T00:56:23.500 回答
10

我同意楼上的回答。但这是 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;
    });
  });
};
于 2012-12-11T21:08:05.873 回答
3

您不需要添加 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']
        }
      }
    }
于 2015-09-21T17:08:39.940 回答
0

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

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

于 2015-11-02T17:05:44.057 回答