由于公司现在前端使用angularjs开发应用，所以对grunt打包做了一些研究，希望对大家有些帮助:

目的

学会grunt打包
并将grunt打包运用于项目实践

前提

• 了解 grunt 的作用与用途
• 熟悉 nodejs
• 熟悉npm的用法

工具链

grunt 安装

由于我们在开发web项目的时候，都要用 grunt 打包，为了减少重复操作，所以需要安装 grunt 到全局，具体的安装脚本如下:

npm i grunt grunt-cli -g //安装grunt到全局

less 安装

由于在项目开发的过程中，我们用到了less,所以提交安装less到全局，具体的安装脚本:

npm i less@latest -g //安装less到全局

流程

配置

准备 Grunt 项目

一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或 Gruntfile.coffee.

配置 package.json

{"name": "angularjs-e2e-showcase",     //项目名称             "version": "1.0.0",                   //版本号"private": true,                      //"devDependencies": {                  //开发依赖"grunt-contrib-clean": "0.6.0",     //清楚目录或者文件"grunt-contrib-jshint": "0.11.0",   //js语法检查"grunt-contrib-concat": "0.5.1",    //合并"grunt-contrib-uglify": "0.8.0",    //js压缩"grunt-contrib-watch": "0.6.1",     //监听"grunt-contrib-cssmin": "0.13.0",   //css严肃哦"grunt-filerev": "2.3.1",           //文件重命名"load-grunt-tasks": "3.2.0",        //加载grunt任务"grunt-usemin": "3.0.0",            //"grunt-contrib-copy": "0.8.0",      //拷贝"grunt-contrib-imagemin": "0.9.4",  //生成雪碧图，并对css相关样式做出调整"karma-coverage": "0.4.2",          //"grunt-lesslint": "1.4.1",          //less检查"grunt-contrib-less": "~1.0.1",     //less生成工具"grunt-contrib-htmlmin": "0.6.0",   //html压缩"karma-jasmine": "0.3.6",           //"busboy": "^0.2.9",                 //"fs-extra": "^0.16.4"               //}                                     //

安装依赖包，安装命令
npm i
如果是国内的话，可以使用 taoao的npm安装源

npm i nrm -g  
nrm use taobao  
npm i

建立 Gruntfile 文件结构

/*** Created by david on 4/10/2016.*/
module.exports = function (grunt) {require('load-grunt-tasks')(grunt); //加载 load-grunt-tasks grunt插件//定义路径变量var path = {tmp: '.tmp',                        //临时目录dest: '.publish',                   //发布目录web: ''  //项目站点};//项目配置文件grunt.initConfig({pkg: grunt.file.readJSON('package.json'),path: path, //申明变量//清楚文件和目录clean:{},//编译less文件为cssless:{},//生成雪碧图，并修改相应的css文件sprite:{},//拷贝文件copy:{},//合并文件concat:{},//压缩csscssmin:{},//压缩Jsuglify:{},//文件重命名filerev:{},//替换文件前准备useminPrepare:{},//替换文件usemin:{}});grunt.registerTask('build', //分组名称[        //该分组包含的任务'clean:beforebuild','less','sprite','copy','concat','cssmin','uglify','filerev','useminPrepare','usemin','clean:afterbuild']);
};

清除文件目录

该任务包含两个子任务:

• 构建前执行脚本
  清除 dest，与 tmp 相关目录与文件

beforebuild: {files: [{src: ['<%= path.dest %>/', '<%= path.tmp %>/']}]
},

• 构建后执行脚本
  清除 tmp 相关目录与文件

afterbuild: {files: [{src: ['<%= path.tmp %>/']}]}

编译less文件

baseStyleCss: {options: {strictMath: true,sourceMap: true,outputSourceFiles: true},src: 'content/stylesheet/less/config.less', //该less文件将导入其他的less文件dest: 'content/stylesheet/css/config.css'}

生成雪碧图

options: {// 给雪碧图追加时间戳，默认不追加spritestamp: true
},
// image-set 示例
imageKityMinderSprite: {options: {useimageset: true,imagepath: "content/images/slice/",         //less文件应用图片的目录地址spritedest: '<%= path.tmp%>/images/slice/'  //生成后的雪碧图目录地址},files: [{// 启用动态扩展expand: true,// css文件源的文件夹cwd: 'content/stylesheet/css',// 匹配规则src: '*.css',// 导出css和sprite的路径地址dest: '<%= path.tmp%>/css/',// 导出的css名ext: '.sprite.css'}]
}

拷贝文件

fonts: {                                     //拷贝字体expand: true,                           //展开cwd: 'content/fonts/',                  //改变当前路径src: ['**'],                            //匹配文件的正则表达式dest: '<%= path.dest %>/fonts/',        //flatten: false                          //},                                          //拷贝图片images: {                                   //expand: true,                           //cwd: 'content/images/other',            //src: ['**'],                            //dest: '<%= path.dest%>/images/other',   //flatten: false                          //},                                          //拷贝雪碧图spriteImages: {                             //expand: true,                           //cwd: '<%= path.tmp%>/images/slice',     //src: ['**'],                            //dest: '<%= path.dest%>/images/slice',   //flatten: false                          //},                                          //拷贝站点小图标ico: {                                      //src: 'favicon.ico',                     //dest: '<%= path.dest%>/'                //},                                          //indexCopy: {                                //拷贝index.htmlexpand: true,                           //src: ['index.html'],                    //dest: '<%= path.dest%>/',               //flatten: false                          //},                                          //appViewsCopy: {                             //拷贝应用相关html文件expand: true,                           //cwd: 'app/',                            //src: ['**/**.html'],                    //dest: '<%= path.dest%>/app/',           //flatten: false                          //}                                           //

合并文件

baseCss: { //合并csssrc: ["bower_components/bootstrap/dist/css/bootstrap.css","bower_components/angular/angular-csp.css","bower_components/color-picker/dist/color-picker.css","bower_components/codemirror/lib/codemirror.css","bower_components/hotbox/hotbox.css",".tmp/css/config.sprite.css"],dest: "<%= path.tmp%>/css/showcase.css"
},
kityminderJs: {src: [ //合并js"bower_components/angular/angular.js","bower_components/jquery/dist/jquery.js","bower_components/bootstrap/dist/js/bootstrap.js","bower_components/angular-bootstrap/ui-bootstrap.js","bower_components/angular-bootstrap/ui-bootstrap-tpls.js","bower_components/seajs/dist/sea-debug.js","bower_components/color-picker/src/color-picker.js","bower_components/codemirror/lib/codemirror.js","bower_components/codemirror/mode/xml/xml.js","bower_components/codemirror/mode/javascript/javascript.js","bower_components/codemirror/mode/css/css.js","bower_components/codemirror/mode/htmlmixed/htmlmixed.js","bower_components/codemirror/mode/markdown/markdown.js","bower_components/codemirror/addon/mode/overlay.js","bower_components/codemirror/mode/gfm/gfm.js","bower_components/angular-ui-codemirror/ui-codemirror.js","bower_components/kity/dist/kity.js","bower_components/hotbox/hotbox.js","lib/kityminder/src/kityminder.js","bower_components/marked/lib/marked.js","app/kityminder/kityminder.app.js","app/kityminder/templates.js","app/kityminder/service/commandBinder.service.js","app/kityminder/service/config.service.js","app/kityminder/service/memory.service.js","app/kityminder/service/lang.zh-cn.service.js","app/kityminder/service/valueTransfer.service.js","app/kityminder/service/minder.service.js","app/kityminder/service/resource.service.js","app/kityminder/service/revokeDialog.service.js","app/_filter/lang.filter.js","app/_directive/kityminder/topTab/topTab.directive.js","app/_directive/kityminder/undoRedo/undoRedo.directive.js","app/_directive/kityminder/appendNode/appendNode.directive.js","app/_directive/kityminder/arrange/arrange.directive.js","app/_directive/kityminder/operation/operation.directive.js","app/_directive/kityminder/hyperLink/hyperLink.directive.js","app/_directive/kityminder/imageBtn/imageBtn.directive.js","app/_directive/kityminder/noteBtn/noteBtn.directive.js","app/_directive/kityminder/resourceEditor/resourceEditor.directive.js","app/_directive/kityminder/priorityEditor/priorityEditor.directive.js","app/_directive/kityminder/progressEditor/progressEditor.directive.js","app/_directive/kityminder/noteEditor/noteEditor.directive.js","app/_directive/kityminder/notePreviewer/notePreviewer.directive.js","app/_directive/kityminder/templateList/templateList.directive.js","app/_directive/kityminder/themeList/themeList.directive.js","app/_directive/kityminder/layout/layout.directive.js","app/_directive/kityminder/styleOperator/styleOperator.directive.js","app/_directive/kityminder/fontOperator/fontOperator.directive.js","app/_directive/kityminder/expandLevel/expandLevel.directive.js","app/_directive/kityminder/selectAll/selectAll.directive.js","app/_directive/kityminder/colorPanel/colorPanel.directive.js","app/_directive/kityminder/navigator/navigator.directive.js","app/_directive/kityminder/searchBox/searchBox.directive.js","app/_directive/kityminder/searchBtn/searchBtn.directive.js","app/kityminder/dialog/hyperlink/hyperlink.ctrl.js","app/kityminder/dialog/image/image.ctrl.js","app/kityminder/dialog/im-export-node/imExportNode.ctrl.js","app/_directive/kityminder/kityminderEditor/kityminderEditor.directive.js","lib/kityminder/src/expose-kityminder.js","app/app.module.js","app/kityminder/kityminder-main-controller.js"],dest: "<%= path.tmp%>/js/showcase.js"
}

压缩css

kopBaseCss: {src: ["<%= path.tmp%>/css/showcase.css"],dest: "<%= path.dest %>/css/showcase.css"
}

压缩Js

baseJs: {src: "<%= path.tmp%>/js/showcase.js",dest: "<%= path.dest%>/js/showcase.js"
}

文件重命名

build: {files: [{src: ['<%= path.dest %>/js/**.js', '<%= path.dest %>/css/**'] //只是对js于css重新命名}]
}

替换文件前准备

html: '<%= path.dest %/**/*.html',options: {dest: './<%= path.dest %>',root: './<%= path.dest %>'}

替换文件

html: {files: [{src: '<%= path.dest %>/**/*.html'}]
},
options: {assetsDirs: ['<%= path.dest %>']
}

实例

项目地址传送门:
https://github.com/haibinpark/angular-e2etest-showcase.git

参考

Gruntjs官方网站
Gruntjs中文网站原文档地址:http://www.haibin.me/2016/04/10/grunt打包实践/#more欢迎大家提意见。