在讲之前先谈谈大致步骤:安装nodejs -> 全局安装grunt -> 项目创建package.json --> 项目安装grunt以及grunt插件 -> 配置Gruntfile.js -> 运行任务
1.安装Node
我们开始之前需要安装Nodejs,如果没有安装的 传送门
安装好了之后,查看是否安装成功,正常是这样的提示
这里建议npm换成淘宝的cnpm,速度杠杠的。
安装命令:
npm install cnpm -g -registry=https://registry.npm.taobao.org
2.安装全局Grunt
安装命令:
cnpm install grunt -g
3.项目创建package.json
在项目根目录下创建package.json文件,文件内容如下
4.项目安装grunt以及grunt插件
我们所需要的插件
插件名称
说明
Github地址
grunt-contrib-clean
清空文件和文件夹
https://github.com/gruntjs/grunt-contrib-clean
grunt-contrib-copy
复制文件和文件夹
https://github.com/gruntjs/grunt-contrib-copy
grunt-contrib-concat
连接、合并文件(没用到)
https://github.com/gruntjs/grunt-contrib-concat
grunt-contrib-cssmin
(CSS文件)压缩
https://github.com/gruntjs/grunt-contrib-cssmin
grunt-contrib-uglify
(JS文件)压缩
https://github.com/gruntjs/grunt-contrib-uglify
grunt-filerev
文件内容hash(MD5)(版本号控制)
https://github.com/yeoman/grunt-filerev
grunt-usemin
文件进行引用修改
https://github.com/yeoman/grunt-usemin
load-grunt-tasks
oad-grunt-tasks
https://github.com/sindresorhus/load-grunt-tasks
我们打开我们的项目文件夹,在路径栏中输入cmd然后回车
回车后的界面
打开命令行窗口之后,我们输入安装命令:
cnpm install grunt grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks --save-dev
5.配置Gruntfile.js (这是重点,重点,重点。重要的事情说三遍。)
先贴一下我的配置,后面慢慢说明
module.exports = function (grunt) { require('load-grunt-tasks')(grunt); var path = { src : 'test', dest : 'dist', } grunt.initConfig({ path : path, clean : {//清空生产文件夹 beforebuild : { files : [{ src : ['<%= path.dest %>/'] } ] } }, filerev : {//对css和js文件重命名 build : { files : [{ src : ['<%= path.dest %>/**', '!<%= path.dest %>/page/*.html',//html文件不加版本号 '!<%= path.dest %>/**/*.{png,jpg,jpeg}']//图片 不需要加版本号 } ] } }, useminPrepare : {//声明concat、cssmin、uglify build : { files : [{ src : '<%= path.src %>/page/*.html' } ], } }, usemin : {//修改html中的css和js引用 html : { files : [{ src : '<%= path.dest %>/page/*.html' } ] } }, copy : {//复制文件 build : { files : [{ expand : true,//为true启用cwd,src,dest选项 cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) src : ['**/*.*'],//相对于cwd路径的匹配模式。意思就是 src/**/*.*,匹配src下面所有文件 dest : '<%= path.dest %>/'//目标文件路径前缀。 } ] } }, cssmin :{ build : { files : [{ expand : true,//为true启用cwd,src,dest选项 cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) src : ['css/*.css'],//相对于cwd路径的匹配模式。意思就是 src/**/*.css,匹配src下面所有css文件 dest : '<%= path.dest %>/'//目标文件路径前缀。 } ] } }, uglify :{ build : { files : [{ expand : true,//为true启用cwd,src,dest选项 cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) src : ['js/*.js'],//相对于cwd路径的匹配模式。意思就是 src/**/*.js,匹配src下面所有js文件 dest : '<%= path.dest %>/'//目标文件路径前缀。 } ] } }, }); grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']); };
我们前面一直都在安装这个安装那个,但是安装的这些东西怎么用起来了?
首先我们通过学习 grunt入门 了解到插件如何使用,这是官网的例子。
pkg是通过读取package.json生成的json对象。
uglify是 grunt-contrib-uglify 指定的任务名,每个插件都有对应的任务名,可以在对应的github里面查看
grunt.loadNpmTasks('grunt-contrib-uglify'); 从字面上就可以看出来/,加载能够提供"uglify"任务的插件。
grunt.registerTask('default', ['uglify']); 注册别名任务,这个别名任务对应的是一个任务列表
当通过 grunt 别名时,实际是执行列表里的任务,并按顺序执行
这些基本的信息都可以通过官网查看。