1新建工程:
mkdir grunt-in-action
cd grunt-in-action
mkdir grunt-by-yo
cd grunt-by-yo
安装webapp生成器:npm install -g generator-webapp
2.建立webapp项目
yo webapp grunt-by-yo:安装webapp
gruntfile.js
//读取外部配置文件:
pkg:grunt.file.readJSON(‘package.json’),
//计算每个 task的执行时间
require(‘time-grunt’)(grunt);
3.建立grunt项目:
mkdir grunt-empty;
在项目中新建文件:
app:
index.html
index.js
Gruntfile.js
//生成package.json
命令:npm init
//安装grunt 并用于生产化境
npm install grunt –save-dev
npm install load-grunt-tasks –save-dev
npm install time-grunt –save-dev
//文件复制
npm install grunt-contrib-copy –save-dev
//文件删除
npm install grunt-contrib-clean -save-dev
==========================================
配置Gruntfile.js
'use strict'
//塔建基本框架
module.exports = function(grunt){
//引入外部grunt 模块
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//配置项目路径
var config ={
app:'app',
dist:'dist',
}
//任务配置
grunt.initConfig({
config:config,
//复制任务
copy:{
dist:{
//源文件
src:'<%=config.app %>/index.html',
//目标文件
dest:'<%=config.dist %>/index.html'
}
},
//清除任务
clean:{
dist:{
src:'<%=config.dist %>/index.html'
}
}
});
}
运行复制,生成dist目录
grunt copy
清除任务执行:
grunt clean
在原来的基础上修改:
'use strict'
//塔建基本框架
module.exports = function(grunt){
//引入外部grunt 模块
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//配置项目路径
var config ={
app:'app',
dist:'dist',
}
//任务配置
grunt.initConfig({
config:config,
//复制任务
copy:{
dist_html:{
//源文件
src:'<%=config.app %>/index.html',
//目标文件
dest:'<%=config.dist %>/index.html'
},
dist_js:{
src:'<%=config.app %>/js/index.js',
dest:'<%=config.dist %>/js/index.js',
}
},
//清除任务
clean:{
dist:{
src:['<%=config.dist %>/index.html','<%=config.dist %>/js/index.js'],
}
}
});
}
复制的第二种写法:使用数组
'use strict'
//塔建基本框架
module.exports = function(grunt){
//引入外部grunt 模块
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//配置项目路径
var config ={
app:'app',
dist:'dist',
}
//任务配置
grunt.initConfig({
config:config,
//复制任务
copy:{
dist_html:{
files:[
{
//源文件
src:'<%=config.app %>/index.html',
//目标文件
dest:'<%=config.dist %>/index.html',
},
{
src:'<%=config.app %>/js/index.js',
dest:'<%=config.dist %>/js/index.js',
}
]
},
},
//清除任务
clean:{
dist:{
src:['<%=config.dist %>/index.html','<%=config.dist %>/js/index.js'],
}
}
});
}
第三种复制写法:
'use strict'
//塔建基本框架
module.exports = function(grunt){
//引入外部grunt 模块
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//配置项目路径
var config ={
app:'app',
dist:'dist',
}
//任务配置
grunt.initConfig({
config:config,
//复制任务
copy:{
dist_html:{
files:{
//目标:源
'<%=config.dist %>/index.html':'<%=config.app %>/index.html',
'<%=config.dist %>/js/index.js':'<%=config.app %>/js/index.js',
}
},
},
//清除任务
clean:{
dist:{//清除项目路径下 目录中的所有文件
src:['<%=config.dist %>/**/*'],
//额外参数:
//保留js文件夹
//filter:'isFile',
//自定义过滤条件
filter:function(filepath){
return (!grunt.file.isDir(filepath));
},
//选中以点开头的文件
//dot:true,
}
}
});
}
额外的配置项:
'use strict'
//塔建基本框架
module.exports = function(grunt){
//引入外部grunt 模块
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//配置项目路径
var config ={
app:'app',
dist:'dist',
}
//任务配置
grunt.initConfig({
config:config,
//复制任务
copy:{
dist_html:{
files:[{
expand:true,//动态映射
cwd:'<%=config.app %>/',
src:'**/*.js',
dest:'<%=config.dist %>/',
ext:'.js',
extDot:'first',//对每一个点开始 +ext配置
flatten:false,//当为true时,将中间的目标去掉
rename:function(dest,src){
return dest +'js/'+src;
}
}]
},
},
//清除任务
clean:{
dist:{//清除项目路径下 目录中的所有文件
src:['<%=config.dist %>/**/*'],
//额外参数:
//保留js文件夹
//filter:'isFile',
//自定义过滤条件
filter:function(filepath){
return (!grunt.file.isDir(filepath));
},
//选中以点开头的文件
//dot:true,
}
}
});
}