Grunt 常用模块设置

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

导读：Grunt 模块已经超过了2000个，且还在快速增加。下面是一些常用的模块（按字母排序）。

grunt-contrib-clean：删除文件。

grunt-contrib-compass：使用compass编译sass文件。

grunt-contrib-concat：合并文件

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语法。

grunt-contrib-uglify：压缩以及合并JavaScript文件。

grunt-contrib-watch：监视文件变动，做出相应动作。

模块的前缀如果是grunt-contrib，就表示该模块由grunt开发团队维护；如果前缀是grunt（比如grunt-pakmanager），就表示由第三方开发者维护。

以下选几个模块，看看它们配置参数的写法，也就是说如何在grunt.initConfig方法中配置各个模块。

grunt-contrib-jshint 模块
jshint用来检查语法错误，比如分号的使用是否正确、有没有忘记写括号等等。它在grunt.initConfig方法里面的配置代码如下。

jshint: {
   options: {
       eqeqeq: true,
       trailing: true
   },
   files: ['Gruntfile.js', 'lib/**/*.js']
},
上面代码先指定jshint的检查项目，eqeqeq表示要用严格相等运算符取代相等运算符，trailing表示行尾不得有多余的空格。然后，指定files属性，表示检查目标是Gruntfile.js文件，以及lib目录的所有子目录下面的JavaScript文件。

grunt-contrib-concat 模块
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）。

grunt-contrib-uglify 模块
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目标指定输入和输出文件。

grunt-contrib-copy 模块
copy模块用于复制文件与目录。

copy: {
main: {
src: 'src/*',
dest: 'dest/',
},
},
上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: {
main: {
expand: true,
cwd: 'src/',
src: '**',
dest: 'dest/',
flatten: true,
filter: 'isFile',
},
},
grunt-contrib-watch 模块
watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。

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插件。安装后，livereload的默认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。

（编辑：汽车网）

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