Grunt打包前端代码教程

详细教程

http://blog.csdn.net/wangfupeng1988/article/details/46418203/

过程：

1.安装node.js

2.兴建 Grunt项目
包含：
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']);}