标签:
付测试例子链接:http://pan.baidu.com/s/1jGk2TEm
步骤:首先需要再与Gruntfile.js同一层创建文件夹dist,然后执行$npm install ,最后执行grunt.
看了两天的grunt各种资料,终于在今天打包成功了,我看了网上的很多资料,在打包的时候都出现很多问题,原因是我的js与css路径问题,现在做一个简单的测试例子。
首先目录结构

package.json
{ "name": "pro", "version": "0.1.1", "description": "最后更新于:2015-11-12", "main": "Gruntfile.js", "dependencies": { "is-stream": "^1.0.1", "lodash": "^3.10.1", "xtend": "^4.0.1" }, "devDependencies": { "grunt-contrib-cssmin": "latest", "grunt-contrib-jshint": "latest", "grunt-contrib-htmlmin": "latest", "grunt-contrib-uglify": "latest" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "www.bluesdream.com", "license": "MIT license" }
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
jshint: {
all: [
‘Gruntfile.js‘,
‘pro/**/*.js‘
],
options: {
browser: true
}
},
//压缩JS
uglify: {
prod: {
options: {
compress: {
global_defs: {
PROD: true
},
dead_code: true
}
},
files: [{
expand: true,
cwd: ‘pro/js‘,
src: [‘*.js‘,‘**.js‘],
dest: ‘dist/js‘
}]
}
},
//压缩CSS
cssmin: {
prod: {
options: {
report: ‘gzip‘
},
files: [
{
expand: true,
cwd: ‘pro/css‘,
src: [‘*.css‘,‘**/*.css‘],
dest: ‘dist/css‘
}
]
}
},
//压缩HTML
htmlmin: {
options: {
removeComments: true,
removeCommentsFromCDATA: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true
},
html: {
files: [
{expand: true, cwd: ‘pro‘, src: [‘*.html‘,‘**/*.html‘], dest: ‘dist‘}
]
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
grunt.registerTask(‘default‘, [‘jshint‘,‘uglify‘,‘cssmin‘,‘htmlmin‘]);
};
然后执行 $npm install ,下载依赖包
最后执行grunt default,成功打包。
我在打包过程中出过错,然后跑去问了grunt原作者,得到他本人的回答,表示很兴奋。他说我的包版本太旧了,让我试试最新的,我索性直接把package.json里面的包版本都设置为latest,压缩成功。

标签:
原文地址:http://www.cnblogs.com/-totoro/p/4962921.html