前端自动化之利剑——Grunt

benson.xu 6年前

来自: http://www.famanoder.com/bokes/5617edc742eae6cc0e52db8f

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