Grunt配置方法
前段时间终于搞定了grunt自动化加密js,整理了下流程,省的大家走弯路哈!整个包的下载地址:http://download.csdn.net/detail/lemon_zhao/9598890
1.从https://nodejs.org/en/下载node安装包 安装nodeJs环境
检查nodeJs是否安装成功,cmd下输入node -v检查当前node版本号
2.安装全局CLI
cmd输入 npm install -g grunt-cli
安装后的 grunt-cli路径C:\Users\lenovo\AppData\Roaming\npm\node_modules
3.在C:\lemon\lab创建两个文件 Gruntfile.js package.json,这两个是配置文件,从我上面给的链接可以下载得到,我得特别说明下
package.json,描述编译文件,js的版本号啦,作者啦,license啦都放这
{
"name": "test",
"version": "v1.4.4",
"description": "jsEncrypt",
"author": "lemon",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"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"
},
"dependencies": {
"express": "3.x"
}
}
Gruntfile.js,编译代码,编译源代码路径,编译后代码路径,一些回调函数
module.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
//压缩js
uglify: {
//文件头部输出信息
options: {
banner: '/* <%= pkg.name %> <%= pkg.description %> <%= pkg.version %> */\n',
footer: '\n/* <%= grunt.template.today("yyyy-mm-dd") %> by lemon */',
stripBanners: true
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'jsSrc/',
src: '*.js',
dest: 'jsDist/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.js';
grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
},
//压缩css
cssmin: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
//美化代码
beautify: {
//中文ascii化,非常有用!防止中文乱码的神配置
ascii_only: true
}
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'cssSrc/',
src: '*.css',
dest: 'cssDist/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.css';
grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);
};
4.在这个目录下执行 npm install
5.有报错可能说:“ grunt-contrib-cssmin”notfound,需要安装css压缩插件
执行 npm install grunt-contrib-cssmin
6.有报错可能说: Fatal error :Unable to find local grunt或者找不到 grunt 的错误
重新安装 grunt
把 C:\Users\SOS\AppData\Roaming\npm\node_modules 下面的 grunt-cli 文件删除。。重新执行
npm install -g grunt-cli
7.在lab目录
在lab目录下执行grunt,编译成功!
