第一步 安装node.js
到node官网下载安装包，安装包已内置npm包资源管理器，安装即可！-
第二步 执行配置及插件安装命令
依次执行以下命令：
安装grunt命令行
命令：npm install -g grunt-cli 使用grunt，首先必须将grunt-cli安装到全局环境中
安装grunt插件
/**
* grunt不是全局安装，需要安装到项目目录下
* —save-dev 设为此目录的依赖，自动在devDependencies中创建自己
/
命令：npm install grunt
命令：grunt 输出 done 代表安装成功
安装必要插件
/文件合并插件*/
npm install grunt-contrib-concat/*js压缩插件*/ npm install grunt-contrib-uglify /*css压缩插件*/ npm install grunt-css -
第三步 创建项目目录
--grunt_test |-package.json |-Gruntfile.js
package.json
/**
* 配置项目信息
* -name 项目名称
* -version 版本号
* -devDependencies 需要使用的类库
/
{
"name": "grunt_test",
"version": "1.0.0",
"devDependencies":
{
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-css": "^0.5.4"
}
}
Gruntfile.js
/*
* 配置Grunt
/
module.exports = function(grunt)
{
/*
* 定义压缩合并
/
grunt.initConfig(
{
/*
* 合并任务
/
concat:
{
/*
* 将js文件内所有js，合并为all.js
/
dist:
{
src : ['js/.js'],
dest: 'js/all.js'
},
/**
* 将css文件内所有css，合并为all.css
*/
css:
{
src: ['css/*.css'],
dest: 'css/all.css'
}
},
/**
* 压缩CSS
*/
cssmin:
{
/**
* 将all.css,压缩为all.min.css
*/
css:
{
src : 'css/all.css',
dest: 'css/all.min.css'
}
},
/**
* 压缩JS
*/
uglify:
{
/**
* 将all.js,压缩为all.min.js
*/
build:
{
src : 'js/all.js',
dest: 'js/all.min.js'
}
}
})
/**
* 加载必要插件
*/
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
/**
* 注册必要插件
*/
grunt.registerTask('default', ['concat','uglify','cssmin']);
}
-
第四步 完成环境配置
使用grunt命令，执行相关任务
