先来一个小分享:
不知道大家是不是有很多人都有这样的体验:很想读书,很想多学习一下书里的知识,但是平常太忙根本没时间。
大家可以关注一下博主新建的微信公众平台或者加入QQ群,主要目的是定期更新一些我们大家的读书笔记和感悟,互相交流,这样就能短时间内汲取更多书的精华知识了~群号303238741,或者扫描文章最下方的二维码,在微信号中给我发一下QQ号~
Grunt是现在非常实用的前端构建工具。所谓前端构建工具,就是可以帮助我们自动完成一些需要经常重复性的操作。比如代码压缩、代码合并等。除此之外,Grunt还有很多非常强大的功能,这些功能都得益于Grunt丰富的组件。
1.常用组件介绍
(1)grunt-contrib-watch
这个组件的作用是,每次修改某些文件的代码并保存时时,都会自动执行grunt命令进行重新构建。这样就省去了我们每次更新文件后都需要手动执行grunt构建的重复性工作。可以在任务内部指定需要监听哪些文件,当这些文件变化时就重新进行自动构建:
watch: {
scripts: {
files: ["src/**/*.js"],
tasks: ["concat"]
}
}
这部分代码表示,监听src目录下的所有js文件,他们如果发生变化的话,就执行concat任务。files字段指定要监听的文件,tasks字段执行这些文件变化后执行哪个grunt任务。
(2)grunt-contrib-concat
这个组件可以指定多个文件,执行该任务后会将这些文件自动连接在一起。连接的方式默认是使用;分进行连接。
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: 'dist/built.js',
},
},
});
这个组件中,options中的separator字段指定了连接所使用的分隔符,每一个dist字段就包含了一个任务块。这里面将src字段中指定的三个文件进行连接,合并成的文件所在的目录和文件名通过dest字段进行定义。
(3)grunt-contrib-connect
该组件非常常用,可以用来创建一个小型的服务器,把项目部署到本地服务器上。使用的代码如下:
grunt.initConfig({
connect: {
server: { //设定server
options: {
port: 8000, //设定端口
hostname: '*', //URL名,设置成*即表示localhost
keepalive: true //如不设定,建立的服务器只在grunt任务执行时才有效,结束之后就停止
}
}
}
});
这里面各个端口的意义很明显,包括端口号、hostname等。注意,这里一定要指定keepalive字段位true。如果不指定该字段的话,服务器只会启动一小会,即grunt构建任务执行的过程中服务器才开启,任务结束后服务器自动关闭。
(4)grunt-contrib-uglify
该组件非常常用,它就是用来对文件进行压缩的。它的使用方法和concat很类似,具体如下:
uglify: {
options: { //banner字段配置了压缩后文件的标题注释
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
}, //pkg.name获取到了package.json文件中的name字段的值
build: {
src: 'src/<%= pkg.name %>.js', //要压缩的文件
dest: 'build/<%= pkg.name %>.min.js' //压缩成的文件名和存放路径
}
以上介绍的四个组件,几本没个项目都会用到,属于最基本最常用的grunt组件。
2.组件的使用方法
总结了一些各种组件的使用方法,步骤如下:
(1)到grunt的官网上搜索自己想要的组件,注意其中contrib开头的是grunt官方团队提供的组件,其他的组件是民间的。
(2)选择好想用的组件后,要通过npm安装到项目中,注意每一个grunt模块如果想使用的话都是需要提前npm安装的。
(3)安装好组件后,需要在grunt.initConfig中进行配置,这就是任务的配置了,属于基本grunt知识,这里不做过多讲解。上面的代码都属于这一部分的内容。
(4)在Gruntfile.js文件中引入组件,方法为:grunt.loadNpm.Tasks('grunt-contrib-uglify')。
完成以上步骤,就可以正确使用grunt的各个组件了!
微信二维码:
欢迎志同道合的小伙伴加入哦~