Grunt-contrib-cssmin模块

发布时间：2023-05-11 14:01:45 所属栏目：教程来源：

导读：现在通过cssmin模块，演示如何编写Gruntfile.js文件。cssmin模块的作用是最小化CSS文件。

首先，在项目的根目录下安装该模块。

npm install grunt-contrib-cssmin --save-dev
然后，新建文件Gruntfile.js。

现在通过cssmin模块，演示如何编写Gruntfile.js文件。cssmin模块的作用是最小化CSS文件。

首先，在项目的根目录下安装该模块。

npm install grunt-contrib-cssmin --save-dev
然后，新建文件Gruntfile.js。

module.exports = function(grunt) {

grunt.initConfig({
cssmin: {
minify: {
expand: true,
       cwd: 'css/',
       src: ['*.css', '!*.min.css'],
       dest: 'css/',
       ext: '.min.css'
   },
combine: {
   files: {
       'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']
       }
   }
}
});

grunt.loadNpmtasks('grunt-contrib-cssmin');

grunt.registerTask('default', ['cssmin:minify','cssmin:combine']);

};
下面详细解释上面代码中的三个方法，下面一个个来看。

1、grunt.loadNpmtasks

grunt.loadNpmtasks方法载入模块文件。

grunt.loadNpmtasks('grunt-contrib-cssmin');
你需要使用几个模块，这里就要写几条grunt.loadNpmtasks语句，将各个模块一一加载。

如果加载模块很多，这部分会非常冗长。而且，还存在一个问题，就是凡是在这里加载的模块，也同时出现在package.json文件中。如果使用npm命令卸载模块以后，模块会自动从package.json文件中消失，但是必须手动从Gruntfile.js文件中清除，这样很不方便，一旦忘记，还会出现运行错误。这里有一个解决办法，就是安装load-grunt-tasks模块，然后在Gruntfile.js文件中，用下面的语句替代所有的grunt.loadNpmtasks语句。

require('load-grunt-tasks')(grunt);
这条语句的作用是自动分析package.json文件，自动加载所找到的grunt模块。

2、grunt.initConfig

grunt.initConfig方法用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。由于我们要配置的是cssmin模块，所以里面有一个cssmin成员（属性）。

cssmin（属性）指向一个对象，该对象又包含多个成员。除了一些系统设定的成员（比如options），其他自定义的成员称为目标（target）。一个模块可以有多个目标（target），上面代码里面，cssmin模块共有两个目标，一个是“minify”，用于压缩css文件；另一个是“combine”，用于将多个css文件合并一个文件。

每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：

expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。

cwd：需要处理的文件（input）所在的目录。

src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。

dest：表示处理后的文件名或所在目录。

ext：表示处理后的文件后缀名。

除了上面这些参数，还有一些参数也是grunt所有模块通用的。

filter：一个返回布尔值的函数，用于过滤文件名。只有返回值为true的文件，才会被grunt处理。

dot：是否匹配以点号（.）开头的系统文件。

makeBase：如果设置为true，就只匹配文件路径的最后一部分。比如，a?b可以匹配/xyz/123/acb，而不匹配/xyz/acb/123。

关于通配符，含义如下：

*：匹配任意数量的字符，不包括/。

?：匹配单个字符，不包括/。

**：匹配任意数量的字符，包括/。

{}：允许使用逗号分隔的列表，表示“or”（或）关系。

!：用于模式的开头，表示只返回不匹配的情况。

比如，foo/*.js匹配foo目录下面的文件名以.js结尾的文件，foo/**/*.js匹配foo目录和它的所有子目录下面的文件名以.js结尾的文件，!*.css表示匹配所有后缀名不为“.css”的文件。

使用通配符设置src属性的更多例子：

{src: 'foo/th*.js'}grunt-contrib-uglify
{src: 'foo/{a,b}*.js'}
{src: ['foo/a*.js', 'foo/b*.js']}
至于combine目标，就只有一个files参数，表示输出文件是css子目录下的out.min.css，输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象，也可以是一个数组。

files: {
'dest/b.js': ['src/bb.js', 'src/bbb.js'],
'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
},
// or
files: [
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
],
如果minify目标和combine目标的属性设置有重合的部分，可以另行定义一个与minify和combine平行的options属性。

grunt.initConfig({
cssmin: {
   options: { /* ... */ },
minify: { /* ... */ },
combine: { /* ... */ }
}
});
3、grunt.registerTask

grunt.registerTask方法定义如何调用具体的任务。“default”任务表示如果不提供参数，直接输入grunt命令，则先运行“cssmin:minify”，后运行“cssmin:combine”，即先压缩再合并。如果只执行压缩，或者只执行合并，则需要在grunt命令后面指明“模块名:目标名”。

grunt # 默认情况下，先压缩后合并
grunt cssmin:minify # 只压缩不合并
grunt css:combine # 只合并不压缩
如果不指明目标，只是指明模块，就表示将所有目标依次运行一遍。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!