如果你还不了解grunt,或者只是听过它的名字而没有去研究过它,那么这篇入门级的文章就是为你写的,相信看完你就会爱上grunt!
grunt是什么?
grunt是一个非常好的自动化工具,你只管codeing,它会自动帮你将代码合并(concat)、压缩(uglify)、语法检查(jshint)、自动编译less(contrib-less)和sass(contrib-sass)、压缩图片(contrib-imagemin)、读写拷贝移动文件等等,极大地简化了你的工作,它有很多插件,前面说到的每个功能都是一个插件,如果没有符合你胃口的插件,你可以自己开发并提交到这里。
要使用grunt,从哪里开始?
OK,相信grunt提供的某些功能还是能吊起你的胃口,grunt和grunt的插件都是通过npm安装和卸载的,npm是Nodejs的包管理器,所以我们首先安装nodejs,有同学在这里就被吓到了,nodejs我完全不会啊,接下来还看得懂吗?放一万个心,完全没问题。安装nodejs很简单,打开nodejs官网,戳中间那个INSTALL按钮就好。安装好了之后打开命令行,不要告诉我你不知道什么叫命令行?OK,按下快捷键win+r键,输入cmd回车,出现一个黑黑的窗口,输入node -v回车之后会显示你刚刚安装好的nodejs版本,那就表示nodejs安装成功了,恭喜你完成了第一步!
接下来需要安装CLI,这是个什么鬼?为什么要装它?不爱问为什么的同学不是好同学。OK,CLI就是grunt的命令行,安装了CLI之后,就可以在任何目录下执行grunt命令了。什么是grunt命令?请继续往下看。
安装CLI命令:
npm install -g grunt-cli
执行完之后
接下来要讲的内容,是一个项目刚刚开始用grunt管理的时候应该怎么去做,就好像你学会了grunt,现在想将grunt应用到手上的项目中去。我们在E盘建一个demo文件夹,这个demo就好比你手上的项目。
首先在项目的根目录下(也就是demo下)新建两个文件:package.json
和 Gruntfile.js。
package.json里面放些什么东西呢?什么项目名称啊、版本号啊、描述之类的,当然最重要的是将项目所用到的grunt插件放到它的devDependencies字段内,它大概长这样:
{ "name": "demo", "version": "1.0.0", "description": "这就是个demo", // 项目用到的grunt插件列表及插件版本号 "devDependencies": {"grunt": "^0.4.5", "grunt-contrib-concat": "~0.3.0","grunt-contrib-copy": "^0.8.0", "grunt-contrib-jshint": "^0.11.2", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-watch": "^0.6.1" } }
当然了,如果你知道插件的版本号,可以直接写在这里面,如果不知道,可以在安装插件的时候在命令行后面加一个命令“--save-dev”让它自动保存在这里。
Gruntfile.js是用来配置grunt任务的,它还可以用来加载grunt插件。看到这里不明白不要紧,后面还会说。
配置好了package.json,回到命令行,切换到demo根目录下(怎么切换?直接输入E:然后回车就切换到E盘了,然后输入cd demo回车就打开demo目录),执行下面的命令会自动安装package.json里配置的grunt插件,现在知道package.json的用处了吧,执行命令前先把package.json里那句注释去掉,不然会报错
npm install
安装完后,demo里面会多出来一个node_modules文件夹,里面就是刚刚安装的grunt插件了
OK,安装步骤到这里结束,下面开始真正使用grunt的阶段了。
任务配置——文件合并
什么是任务?每个grunt插件都是一个任务,安装了上面那么些插件,都有些什么用?先来看第一个插件"grunt-contrib-concat",它是用来合并文件的,下面看看它怎么用的吧。
先在demo下新建一个src文件夹,在里面新建3个js文件分别叫a.js、b.js和c.js;3个文件内容分别是:
// a.js内容 function aaa(){ return "aaa"; } // b.js内容 function bbb(){ return "bbb"; } // c.js内容 function ccc(){ return "ccc"; }
那么怎么用插件"grunt-contrib-concat"来合并这3个文件呢?请在Gruntfile.js里面写入下面的内容:
module.exports = function(grunt) { // 任务配置 grunt.initConfig({ // 配置concat任务 concat: { options: { // 配置合并的文件内容之间的分隔符 separator: ';' }, dist: { // 要合并的文件 src: ['src/a.js', 'src/b.js', 'src/c.js'], // 合并为哪个文件 dest: 'dist/all.js' } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-concat'); }
保存之后在命令行里输入grunt concat回车,命令行输出“File 'dist/all.js' created”就表示文件合并成功了!就这么简单!
demo文件夹下会多出一个dist文件夹,里面就是合并好的文件all.js
到这一步你已经学会了grunt的基本用法了,其它任务也都是两步:一配置任务,二调用任务执行,而且任务配置好了以后只要调用命令执行就好了,一劳永逸啊。
也许你还不太理解上面Gruntfile.js的配置怎么来的?Gruntfile.js包括四个部分:
- "wrapper" 函数
- 任务配置
- 加载grunt插件和任务
- 自定义任务
从上面的配置已经可以看得很清楚了,最外层的函数就是"wrapper"函数,任务配置即grunt.initConfig({……})这一段,grunt.loadNpmTasks(插件名称)用于加载grunt插件和任务的,最后一个自定义任务在哪呢?
自定义任务:grunt.registerTask(taskName,description,taskFunction)接收三个参数,第一个是任务名称,第二个是任务描述,第三个是任务执行时执行的函数。当第二个参数是数组时,数组内可以传入其它任务名称,当执行自定义任务时,就会执行数组内的任务。
任务配置里面配置了哪个任务,那么下面就要用grunt.loadNpmTasks加载对应的插件,这里配置的是concat这个任务,因此下面对应加载grunt-contrib-concat插件。任务配置是以任务名称命名的属性,grunt.initConfig中可以配置多个任务,每个任务的具体配置参数可以到这里找到对应的插件进行查看。
任务配置——代码压缩
接下来我们来配置多个任务,将合并后的js压缩,压缩js的插件"grunt-contrib-uglify"在package.json有配置过,在执行npm install命令的时候已经安装好了,下面开始配置:
module.exports = function(grunt) { // 任务配置 grunt.initConfig({ // 配置concat任务 concat: { options: { // 配置合并的文件内容之间的分隔符 separator: ';' }, dist: { // 要合并的文件 src: ['src/a.js', 'src/b.js', 'src/c.js'], // 合并为哪个文件 dest: 'dist/all.js' } },
// 配置压缩任务 uglify: { client: { files:{
// 压缩后js路径和要压缩的js路径(没错,这里是个数组,可以直接将多个js合并后压缩) "dist/all.min.js": ["dist/all.js"] } } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); // 自定义任务 grunt.registerTask("build",["concat","uglify"]); }
执行自定义任务build
grunt build
输出的all.min.js就是合并且压缩后的代码
任务配置——文件watch+自动编译less
最后,来做一个自动编译less的案例,这个案例需要用到watch插件和less插件,这俩插件之前没有安装,那么现在安装一下
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev
后面的“--save-dev”会将这个插件及其版本号保存到package.json。安装完成后在Gruntfile.js加入配置:
module.exports = function(grunt) { // 任务配置 grunt.initConfig({ // 配置watch任务 watch: { // 要监听的文件 files: ["less/index.less"], // 监听的文件发生变化时执行的任务 tasks: ["less"] }, less: { development: { options: { // 是否压缩编译后的css compress: true }, files: { // 编译后的css路径和要编译的less路径 "less/index.css": ["less/index.less"] } } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-less'); // 自定义任务 grunt.registerTask("default",["watch"]); }
执行任务
grunt
注意:因为配置里面自定义任务设置了default即默认任务为watch,所以命令行里输入grunt和grunt watch的效果是一样的。执行后,命令行输出
Running "watch" task
Waiting...
表示正在监听,切换到index.less去新增一些样式然后保存,watch监听到index.less有变化输出
Completed in 1.560s at Fri Jun 26 2015 23:41:22 GMT+0800 (中国标准时间) - Waitin
g...
>> File "less\index.less" changed.
Running "less:development" (less) task
File less/index.css created
同时执行了less编译任务,在less文件夹自动生成了index.css。以前用考拉(一个less编译软件)编译less,经常写了几行样式发现软件没有打开,换做grunt之后就方便多了。
以上就是本次要分享的全部内容了,是不是很轻松就入门了?如果本文对你有所帮助,麻烦点个赞吧!
by:王美建 from:http://www.cnblogs.com/wangmeijian/ 转载请保留署名及出处!