Grunt打包前端代码教程

本文主要是介绍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: { //压缩csspayment: {"files": {'payment/build/css/main.css': ['payment/src/css/*.css']//将数组里面的css文件压缩成一个目标文件}}},htmlmin: { //压缩htmlpayment: {options: { // Target optionsremoveComments: 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']);
}

这篇关于Grunt打包前端代码教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---