JavaScript的世界里一切皆模块。
一切要从NodeJs说起，说起NodeJs就不得不说npm、Express，npm是NodeJs的包管理工具，Express是基于NodeJs的开发框架，一步步安装完NodeJs后就已经安装好npm了，然后你可以npm install -g express-generator来安装最新版的Express4.x；这里不说Express了；来通过npm安装Grunt，npm install -g grunt-cli全局安装grunt命令行工具，要正式使用Grunt需要你的项目目录下有package.json文件，如果你是Express项目骨架，就不要单独弄个package.json了，只需要npm install grunt --dev在开发环境下安装，由于grunt只是用来压缩、合并、打包、自动化测试等的，一般上线不需要依赖它，所以--dev，当然--save也是可以的；如果你 的项目骨架里原本没有package.json文件，当你安装完node后只需进入项目根目录，npm init就可以通过命令行一步步生成一个package.json,更简单粗暴的方法就是，去Grunt官网下载package.json和Gruntfile到项目目录下，慢慢修改……
好了，你可以开始Grunt了，新建一个Gruntfile.js文件；其实Gruntfile里的内容也大多格式差不多的；可能理解一个Grunt插件，就会了大部分了；
1、首先是个固定的外围，用过Seajs、Require的就再熟悉不过了；
module.exports=function(grunt){//......}
2、Gruntfile.js里内置了一个简单的模板引擎，可以很方便的来解析配置目录结构；根据你的前端结构来配置需要的资源目录吧！比如小站的前端资源结构其中一部分是这样的：
var config={
pubFile:'./public',
sass:{
mana:'./public/sass/mana',
page:'./public/sass/page'
},
css:{
mana:'./public/stylesheets/mana',
page:'./public/stylesheets/page'
},
jsModules:'./public/javascripts/modules'
}注意这里的命名是随意的，只要你自己青春的知道什么意思，以及对应的资源目录；因为我这里CSS是通过Sass来组织的，内部也是通过Sass造了很多CSS模块，个人感觉还是挺爽的，后期有时间整理完整会很不错的；JS部分是以Jquery作为基础类库，自己慢慢造了一堆模块，通过Seajs组织到一起的，所以会有个jsModules目录；
3、开始你想要的一键压缩、合并、打包……开始安装需要的Grunt插件并配置任务，监听任务；
grunt.initConfig({
config:config,
//所有任务配置从这开始
//比如实时监听任务的watch
//当然，首先你还是得安装他：npm install grunt-contrib-watch --dev
//这里先来监听下mana和page目录下Scss文件的修改，让grunt来实时编译并保存
watch:{
files:['<% config.sass.mana %>/*.scss','<% config.sass.page %>/*.scss'],
task:sass,
//任务指向了sass
options:{
livereload:true
}
//更多配置项详见grunt-contrib-watch github
}，
sass:{
//配置sass任务
//安装grunt sass插件：npm install grunt-contrib-sass --dev
//这里要特别注意，当你sass模块的较细时，主文件里会有多个@import进来的模块
//一定要先配置loadPath项，比如：
loadPath:[
'<%=config.pubFile%>/sass/common/vars.scss',
'<%=config.pubFile%>/sass/common/reset.scss',
'<%=config.pubFile%>/sass/mixins/css3.scss'
],
options:{
style:'compressed'
//编译后的格式：nested是默认格式（嵌套缩进）、expanded是没有缩进、扩展的格式、
//compact是简洁版的、compressed是压缩后的
}，
files:{ '<%=config.css.mana%>/deleteArticals.css':'<%=config.sass.mana%>/deleteArticals.scss'
……
}
}
});4、还有很多配置任务，尽情百度github吧！JS的压缩合并都可以用uglify
5、加载任务插件：
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
6、默认被执行的任务列表：
grunt.registerTask(default,['sass','watch']);
7、在此只是简单的入门，更多精彩还需你去结合自己的项目情况，去安装相应插件，配置相应任务；
8、自从有了Grunt，妈妈再也不用担心我前端资源的压缩、合并、打包什么的了；
9、如果你想在本地随意的写代码，但又怕上线时资源错乱，那么请使用Grunt吧，保证你在本地写的任性，Grunt一键帮你整理的妥妥当当！只要你配置好Gruntfile.js就OK了！
本文为慕课网作者原创，转载请标明【原文作者及本文链接地址】。侵权必究，谢谢合作!
随时随地看视频
