继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

前端自动化之利剑——Grunt

花满楼的小前端a
关注TA
已关注
手记 42
粉丝 111
获赞 2213

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

本文为慕课网作者原创,转载请标明【原文作者及本文链接地址】。侵权必究,谢谢合作!
打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP