转载

前端自动化之利剑——Grunt

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了！

原文 http://www.famanoder.com/bokes/5617edc742eae6cc0e52db8f

正文到此结束