标签：设置 ejs 方式 函数 .json 数组 path 文件删除 targe
1. 新建项目目录
2. 在项目目录下新建index.html, js文件夹，js文件夹下新建index.js
3. 运行命令npm init，填写项目的基本信息，生成package.json文件，生成package.json文件（如果老项目本身就是包含package.json的node项目则可以忽略这一步）
4. 如果想在项目中引入grunt作为devdependencies或者dependencies可以运行下面的命令
npm install grunt --save-dev
npm install grunt --save
5. 安装一个插件，使得自动加载package.json文件中所有以grunt-开头的文件
npm install load-grunt-tasks --save-dev
6. 安装插件time-grunt，可以自动计时
npm install time-grunt --save-dev
7. 新建Gruntfile.js文件，编写基本模块
‘use strict‘;
module.exports=function(grunt){
require(‘load-grunt-tasks‘)(grunt); // 加载声明的几个模块
require(‘time-grunt‘)(grunt);
var config={ // 配置项目路径
app:‘app‘,
dist:‘dist‘
};
grunt.initConfig({ // 开始任务配置
config:config,
})
}
8. 安装这几个基本的task，grunt的文件拷贝和文件删除都依赖几个官方提供的文件
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-clean --save-dev
9. 新建app文件夹，将index.html以及js文件夹这些源文件拷贝到app目录下
10. 回到gruntfile.js配置copy命令，有三种方式，都支持src(源文件),dest(目标文件)
grunt.initConfig({
config:config,
copy:{ // 将app中的index.html文件拷贝到dist中的index.html
dist:{
src:‘<%= config.app %>/index.html‘,
dest:‘<%=config.dist %>/index.html‘
},
}
});
运行这个任务只需要grunt copy命令即可。
下面配置clean删除文件操作：
clean:{
dist:{
src:‘<%=config.dist%>/index.html‘ // 删除dist中的index.html文件
}
}
同样，使用grunt clean运行该任务
如果有多个target时，可以这样写：
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‘] // 使用数组形式
}
}
});
这里运行copy命令时，可以选择性的只运行dist_js，如下：grunt copy:dist_js
grunt.initConfig({
config:config,
copy:{
dist:{
files:[{ // 使用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‘]
}
}
});
grunt.initConfig({
config:config,
copy:{
dist:{
files:{ // 键是dist即dest，值是app即src,值可以是数组
‘<%=config.dist %>/index.html‘:‘<%= config.app %>/index.html‘,
‘<%=config.dist%>/js/index.js‘:‘<%=config.app%>/js/index.js‘
}
}
},
clean:{
dist:{
src:[‘<%=config.dist%>/index.html‘,‘<%=config.dist%>/js/index.js‘]
}
}
});
11. 配置clean命令
grunt.initConfig({
config:config,
copy:{
dist:{
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文件夹一起删除，前面的几种方法都是删除了js文件夹下的js文件，并没有删除文件夹。然后需要注意的是**/*，一个*表示匹配任意字符，但是不匹配/，两个*表示匹配任意字符包括/。
11. 额外参数的配置（仅支持10中的第一种和第二种配置方式）
如下实现不删除js文件夹，仅删除文件的功能
clean:{
dist:{
src:[‘<%=config.dist%>/**/*‘],
filter:‘isFile‘
}
}
clean:{
dist:{
src:[‘<%=config.dist%>/**/*‘],
filter:function(filepath){
// filter函数返回true则表示该路径符合要求，否则不符合要求，放在这里就是删除为true的文件路径
return (!grunt.file.isDir(filepath));
}
}
}
举例：
copy:{
dist_html:{
files:[{
expand:true,
cwd:‘<%=config.app%>/‘, // cwd dest中不要忘记后面的反斜杠/
src:‘*.html‘,
dest:‘<%=config.dist%>/‘,
ext:‘.min.html‘ // 指定后缀名，存在dest中的index.html名字改为index.min.html
//extDot:‘first‘ // index.max.html变为index.min.html把第一个点后的内容全部删掉换成指定后缀
extDot:‘last‘ // index.max.html变为index.max.min.html把最后一个点后的内容全部删掉换成指定后缀
flatten:true
// 如果将src改为**/*.js则直接将index.js复制到了dist目录下，没有js文件夹，如果将flatten设为false，则复制到dist的js文件夹下
rename:function(dest,src){
return dest+"js/"+src;
// 通过rename函数将js文件夹又加回来了，效果相当于flatten设置为false的效果
}
}]
}
},
标签：设置 ejs 方式 函数 .json 数组 path 文件删除 targe
原文地址：http://www.cnblogs.com/YangqinCao/p/6067748.html
