1、安装nodeJs环境(包含npm)
2、$ npm install -g grunt-cli //可调用与Gruntfile在同一目录中的Grunt版本
3-1、$ npm install -g grunt-init 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件
3-2、$ npm init //命令会创建一个基本的package.json文件,一步步设置回车。
C:Users***AppDataRoaming
pm
ode_modulesgrunt-init
{
"name": "main",//文件名
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
}
}
3-3、根据需要做扩充
$ npm install grunt --save-dev
//向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。
此命令不光安装了<module>,还会自动将其添加到devDependencies 配置段中,
eg:$ npm install grunt-contrib-uglify;
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
}
4、添加Gruntfile.js文件
module.exports = function(grunt){
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {//grunt-contrib-uglify 插件的同名属性
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
//用于在文件顶部生成一个注释
},
build: {//用于将一个js文件压缩为一个目标文件。
src: 'src/<%=pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
//只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
//自定义任务
// 默认任务
grunt.registerTask('default', ['uglify']);或者
grunt.registerTask('default', 'Log some stuff.', function() { grunt.log.write('Logging some stuff...').ok(); });
特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中,并通过grunt.loadTasks方法加载。
}
5、$ grunt