详细教程
http://blog.csdn.net/wangfupeng1988/article/details/46418203/
过程:
1.安装node.js
包含:
F:\App\grunt_test
package.json:
{
"name": "grunt_test",
"version": "0.1.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "latest",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "latest",
"grunt-contrib-cssmin": "^2.2.0",
"grunt-contrib-htmlmin": "latest",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-requirejs": "latest",
"grunt-contrib-sass": "*",
"grunt-contrib-uglify": "^3.0.0",
"grunt-contrib-watch": "*",
"grunt-cssc": "*",
"grunt-htmlhint": "*",
"grunt-usemin": "latest",
"matchdep": "*"
},
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "huzhao",
"license": "ISC"
}
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat', 'uglify']);
};
3.安装 Grunt及相关插件
cmd命令行
npm install grunt -g //安装grunt,-g全局变量
npm install grunt-cli -g //安装grunt命令行
npm install grunt --save-dev //安装grunt,--save-dev保存到安装目录
npm install grunt-cli --save-dev //安装grunt命令行
npm install grunt-contrib-jshint --save-dev //js语法检测插件
npm install grunt-contrib-concat --save-dev //js合并插件
npm install grunt-contrib-uglify --save-dev //js压缩插件
npm install grunt-contrib-cssmin --save-dev //CSS压缩插件
4.实例学习:打包zepto
http://www.cnblogs.com/yexiaochai/p/3603389.html
1.在项目里新建src文件夹
放入要压缩的目标文件
2.cmd 执行 grunt命令
3.结果图
总结:
1.压缩文件路劲设置
Gruntfile.js里
2.压缩文件命名
package.json里
3.grunt 相关插件配置
package.json里
完整项目
module.exports = function(grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: { //清除目标文件下文件
payment: {
src: "payment/build"
}
},
copy: {
payment: {
expand: true,
cwd: 'payment/src',//源文件路径
src: '**',//源文件目录下的所有文件
dest: 'payment/build/',//目标文件路径,把源文件下的文件复制到该目录下
flatten: false,//用来指定是否保持文件目录结构
filter: 'isFile',
},
},
uglify: {//压缩js文件
payment: {
files: [{
expand: true,
cwd: 'payment/src/js', //js源文件目录
src: '*.js', //所有js文件
dest: 'payment/build/js' //输出到此目录下
}]
}
},
// sass: {
// payment: {
// files: [{
// expand: true,
// cwd: 'src',
// src: ['*.scss'],
// dest: 'payment/build',
// ext: '.css'
// }]
// }
// },
cssmin: { //压缩css
payment: {
"files": {
'payment/build/css/main.css': ['payment/src/css/*.css']//将数组里面的css文件压缩成一个目标文件
}
}
},
htmlmin: { //压缩html
payment: {
options: { // Target options
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true, // Enable dynamic expansion.
cwd: 'payment/src', // Src matches are relative to this path.
src: ['*.html'], // Actual pattern(s) to match.
dest: 'payment/build/', // Destination path prefix.
ext: '.html', // Dest filepaths will have this extension.
extDot: 'first' // Extensions in filenames begin after the first dot
}]
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// 默认任务
grunt.registerTask('payment', ['clean:payment','copy:payment', 'uglify:payment', 'cssmin:payment', 'htmlmin:payment']);
}