Grunt 常用模块
已经超过了2000个，且还在。下面是一些常用的模块（按字母排序）。
grunt-contrib-clean：。
grunt-contrib-compass：使用compass编译sass。
grunt-contrib-concat：合并。
grunt-contrib-copy：复制。
grunt-contrib-cssmin：压缩以及合并CSS。
grunt-contrib-imagemin：图像压缩模块。
grunt-contrib-jshint：检查JavaScript语法。
：压缩以及合并JavaScript。
grunt-contrib-watch：监视变动，做出相应动作。
模块的前缀如果是grunt-contrib，就表示该模块由grunt开发团队维护；如果前缀是grunt（比如grunt-pakmanager），就表示由第三方开发者维护。
以下选几个模块，看看它们配置参数的写法，也就是说如何在grunt.initCon中配置各个模块。
jshint用来检查语法，比如分号的使用是否正确、有没有忘记写括号等等。它在grunt.initCon里面的配置如下。
jshint: {
options: {
eqeqeq: true,
trailing: true
},
files: ['Gruntfile.js', 'lib/**/*.js']
},
上面先指定jshint的，eqeqeq表示要用严格相等运算符取代相等运算符，trailing表示行尾不得有多余的空格。然后，指定files，表示检查目标是Gruntfile.js，以及lib目录的所有子目录下面的JavaScript。
concat用来合并同类，它不仅可以合并JavaScript，还可以合并CSS。
concat: {
js: {
src: ['lib/module1.js', 'lib/module2.js', 'lib/plugin.js'],
dest: 'dist/script.js'
}
css: {
src: ['style/normalize.css', 'style/base.css', 'style/theme.css'],
dest: 'dist/screen.css'
}
},
js目标用于合并JavaScript，css目标用语合并CSS。两者的src指定需要合并的（input），dest指定的目标（output）。
uglify模块用来压缩，减小体积。
uglify: {
options: {
banner: bannerContent,
sourceMapRoot: '../',
sourceMap: 'distrib/'+name+'.min.js.map',
sourceMapUrl: name+'.min.js.map'
},
target : {
expand: true,
cwd: 'js/origin',
src : '*.js',
dest : 'js/'
}
},
上面中的options指定压缩后的头，以及sourceMap设置；target目标指定输入和。
用于复制与目录。
copy: {
main: {
src: 'src/*',
dest: 'dest/',
},
},
上面将src子目录（只包含它下面的第一层和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝、不拷贝目录、不保持目录结构，可以写成下面这样：
copy: {
main: {
expand: true,
cwd: 'src/',
src: '**',
dest: 'dest/',
flatten: true,
filter: 'isFile',
},
},
用来在运行，监听指定事件，然后运行指定的任务。
watch: {
scripts: {
files: '**/*.js',
tasks: 'jshint',
options: {
livereload: true,
},
},
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
},
},
},
设置好上面的，打开另进程，运行grunt watch。此后，任何的js变动，保存后就会运行jshint任务；任何sass变动，保存后就会运行sass任务。
需要注意的是，这两个任务的options参数之中，都设置了livereload，表示任务运行结束后，在浏览器中重载（reload）。这需要在浏览器中安装。安装后，livereload的认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。
下面是另外一些有用的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>
602392714
清零编程群