Grunt 其他模块

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

导读：下面是另外一些有用的Grunt模块。着重讲解几个常用的Grunt模块供你学习。

1、grunt-contrib-clean 模块

该模块用于删除文件或目录。

clean: {
build: {
src: ["path/to/dir/one", "path/to/dir/two

下面是另外一些有用的Grunt模块。着重讲解几个常用的Grunt模块供你学习。

1、grunt-contrib-clean 模块

该模块用于删除文件或目录。

clean: {
build: {
src: ["path/to/dir/one", "path/to/dir/two"]
}
}
2、grunt-autoprefixer 模块

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: {
build: {
expand: true,
cwd: 'build',
src: [ '**/*.css' ],
dest: 'build'
}
},
3、grunt-contrib-connect 模块

该模块用于在本机运行一个Web Server。

connect: {
server: {
options: {
port: 4000,
base: 'build',
hostname: '*'
}
}
}
connect模块会随着grunt运行结束而结束，为了使它一直处于运行状态，可以把它放在watch模块之前运行。因为watch模块需要手动中止，所以connect模块也就会一直运行。

4、grunt-htmlhint 模块

该模块用于检查HTML语法。

htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
},
src: ['index.html']
}
}
上面代码用于检查index.html文件：HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

5、grunt-contrib-sass 模块

该模块用于将SASS文件转为CSS文件。

sass: {
build: {
options: {
style: 'compressed'
},
files: {
'build/css/master.css': 'assets/sass/master.scss'
}
}
}
上面代码指定输出文件为build/css/master.css，输入文件为assets/sass/master.scss。

6、grunt-markdown 模块

该模块用于将markdown文档转为HTML文档。

markdown: {
all: {
files: [
{
expand: true,
src: '*.md',
dest: 'docs/html/',
ext: '.html'
}
],
options: {
template: 'templates/index.html',
}
}
},
上面代码指定将md后缀名的文件，转为docs/html/目录下的html文件。template属性指定转换时采用的模板，模板样式如下。

<!DOCTYPE html>
<html>
<head>
<title>F2er.com Grunt示例</title>
</head>
<body>

<div id="main" class="container">
<%=content%>
</div>

</body>
</html>

（编辑：汽车网）

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