在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩、合并前端文件并打包整个项目。但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目每维护一次,就需要维护的人员输入一次rjs运行口令重新打包项目,自然是非常繁琐的事情。另外如果我们的项目用sass来写样式,可能还得外开一个koala。如果我们能让项目自己处理自己的所有事宜,那一切就美好多了。
针对上述问题,今天我们就利用更为大众的工具——Grunt,来自动化地处理前端事务(其实rjs也是使用了Grunt的concat和uglify等插件)。
我们依旧使用一个非常简单的、名为before的项目(你可以在我的Github下载这个案例)来作为示例,它是一个很纯净的项目,还没有使用任何前端工具对其进行操作:
你可以试着运行根目录下的index.html文件,它会显示一张幻灯片。
接下来我们将在before项目上使用Grunt自动化前端事务。
操作需求
由于Grunt是运行与node上的,故要求你的电脑安装了nodeJS(点我下载);
由于我们这边使用了sass来写样式,故要求你的电脑安装了Ruby(注意Mac是默认安装有Ruby的,如果是Windows或其它系统请点此下载安装)。
安装时建议把三个可以勾选的选项都勾上(特别要勾选上第二个,这样才会添加环境变量),安装后点击 “所有程序” - “Ruby.13...” - “start command prompt with Ruby”,打开Ruby命令行界面并输入指令:
gem install sass
注意该指令必须要在FQ的情况下才执行,不然可能会导致无法安装sass的错误:
另外,我们后续编译sass的时候,若.scss文件中存在中文注释,Ruby可能会因为识别不了中文编码而导致出错。不过解决方法很简单,点击此处查看
安装GRUNT CLI
我们打开 Node.js command prompt 进入node命令行界面:
在命令行界面输入以下代码并回车运行,此举是安装Grunt全局命令行,从而我们可以在电脑任何位置调用grunt命令语句:
npm install -g grunt-cli
Grunt配置
Grunt的入门其实可以参考官方入门,虽然这篇官方指引写的很烂,却也告诉我们,Grunt配置离不开两个文件—— package.json 和 Gruntfile.js ,我们一般都把它们放置在项目根目录上 。
其中 package.json 作用是记录项目的名称(随便起个名字就行)、版本号(随便起个数字串就行)和插件依赖,创建package.json完全不用手动,我们只需要把node命令行定位到项目下(假设我们把上述的before项目放在E盘),然后输入以下指令并回车执行,便会在项目根目录自动创建一个初始化的 package.json 文件:
npm init
回车后node会问你若干个问题,包括项目名啊版本号啊什么有的没的,你有心情可以写一写,没心情就一路按回车下来即可:
这时你会发现根目录下就这样多了个叫package.json的文件:
里面有node帮我们预先定义好的json代码。不过我各人并不喜欢使用 npm init 这种婆妈的形式来自动生成package.json,还不如自己手动创建一个package.json,并输入简洁的代码:
{ "name": "before", "version": "1.0.0" }
是的,初始化咱只要就这么俩行即可,其实我甚至希望能简短到只有 { } 即可。可惜 name 和 version 对于 package.json 来说是非常重要的俩个属性,缺一不可(可以查看这里了解更多package.json属性的作用)
安装插件
Grunt只是一个载体,实际要用起来得使用各种五花八门的grunt插件(有点类似在Sublime上我们可以安装并使用各种sb插件)。
而我们的before项目需要运用到下面几个插件:
grunt —— 这个不用说了,就是Grunt它自己本身;
grunt-contrib-uglify —— 作用是压缩项目js文件;
grunt-contrib-sass —— 作用是编译项目中的sass为(压缩版的)css文件;
grunt-contrib-watch —— 作用是实现我们一开始需求的“自动化”!是最重要的一个插件之一!它会监听需要处理的文件的变动,一旦有变动就会自动执行相应处理。但是它有一个问题,就是每当监听到一处变动时,就会大费周章地把所有被监听的文件都处理一遍;
grunt-newer —— 作用是处理上方watch的毛病,让watch在监听到某个文件变动时,仅仅对变动的文件进行事务处理。
然而在node中,安装grunt插件的命令为:
npm install <插件名> --save-dev
其中后面的 “--save-dev” 表示保存为依赖,即在安装好插件后,会将此插件依赖写入package.json文件中(记得我们前面说到package.json的作用之一是记录项目的插件依赖么)。
于是我们在项目的根目录下分别运行下述命令安装插件:
npm install grunt --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev
运行时可能会提示如下的警告:
这是因为咱在package.json里没有写一些description等婆妈的东西,故这里的WARN不痛不痒直接无视它即可。
插件安装好后会发现项目根目录上多了个叫“node_modules”的文件夹,是用来存放我们安装好的插件的。另外我们打开package.json,会发现它已经自动加入了插件依赖信息:
配置Gruntfile.js文件
开始我们就提到grunt有2个不可缺少的文件 —— package.json 和 Gruntfile.js 文件,package.json咱已轻松搞定,下面新建一个Gruntfile.js 文件并输入以下代码:
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), //上面是固定好的,不用管它,照搬即可。 //下面是各插件事务的配置,顺序不分先后 sass: { // grunt-contrib-sass的事务定义 tocss: { options: { style: ‘compressed‘, //以压缩模式编译css,这样咱们也没必要使用grunt-contrib-cssmin插件了 sourcemap:‘none‘ //设置不要配套输出map文件 }, files: [{ expand:true, cwd:‘css‘,//css目录下 src:‘**/*.scss‘,//所有css文件 dest: ‘css‘,//输出到此目录下 ext: ‘.css‘ }] } }, uglify: { // grunt-contrib-uglify的事务定义 compressjs: { files: [{ expand:true, cwd:‘js‘,//js目录下 src:‘**/*.js‘,//所有js文件 dest: ‘output/js‘//输出到此目录下 }] } }, watch: { // grunt-contrib-watch的事务定义 all: { files: [‘css/**/*.scss‘,‘js/**/*.js‘], tasks: [‘newer:sass‘,‘newer:uglify‘] } } }); //grunt.loadNpmTasks() 是告诉Grunt,咱们要使用哪些插件,顺序不分先后 grunt.loadNpmTasks(‘grunt-contrib-watch‘); grunt.loadNpmTasks(‘grunt-contrib-uglify‘); grunt.loadNpmTasks(‘grunt-contrib-sass‘); grunt.loadNpmTasks(‘grunt-newer‘); //grunt.registerTask(‘default‘, [])是告诉Grunt,我们在node命令行输入grunt指令后要执行哪些事务 grunt.registerTask(‘default‘, [‘newer:sass‘,‘newer:uglify‘,‘watch‘]); //注意 "newer:XXX"是插件grunt-newer的事件定义,表示对冒号后面的事务生效 };
Gruntfile.js的配置或许算是配置Grunt的一个难点吧,它的作用是告诉Grunt要使用哪些插件(安装了不代表一定要用对吧,当然要用的话一定得安装)、每个插件又要进行怎样的事务操作。
其实Gruntfile.js最最简单的初始化框架是这样的:
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), 插件事务名称: { ........//事务定义 } }); //grunt.loadNpmTasks() 是告诉Grunt,咱们要使用哪些插件,顺序不分先后 grunt.loadNpmTasks(‘插件名‘); //grunt.registerTask(‘default‘, [])是告诉Grunt,我们在node命令行输入grunt指令后要执行哪些事务 grunt.registerTask(‘default‘, [‘插件事务名称‘]); };
稍微推敲下,很容易理解代码的含义。如若了解更灵活、复杂的Gruntfile.js配置,可以点此查看指引。
一切都捣鼓好后,我们可以直接在node命令行(依旧定位在根目录下哦,其实可以不用再唠嗑了)输入
grunt
回车执行后便进入自动化执行状态,只要有js或者scss文件变动,变动的文件就会重新被压缩或编译:
像本章的例子是使用了sass来写样式,如果你只写原生的css,又希望能压缩样式文件,那么可以使用 grunt-contrib-cssmin 插件,其具体配置可以点此查看,本文就不赘述了。
共勉~