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

小编典典

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

css

注意：此问题仅与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');

};

因此，总结一下，我需要两个问题的帮助：

如何将文件夹下的所有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 不应引入许多重大变化。

阅读 228

2020-05-16

共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'
  }
},

内置 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

2020-05-16