工程化起步(一):Grunt

一、什么是Grunt

Grunt是一个任务管理器,可以使用它来校验Javascript语法、css压缩、Sass编译等一些前端工程化的任务。借用官网的说法就是“对于需要反复重复的任务,例如压缩、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。”

二、安装及原理

2.1 安装命令

Grunt是基于Node.js运行并通过npm安装和管理的,安装命令如下

npm install -g grunt-cli

在安装的时候,可能会遇到权限问题,所以,我们在linux/mac系统上需要

sudo npm install -g grunt-cli

windows环境下需要用管理员模式来执行该命令。

2.2 原理工作

运行grunt的时候,它就是利用Node.js提供的require方法来找到本地安装的grunt。找到后,脚手架(CLI)加载Grunt,然后通过Gruntfile中的配置信息,执行你自己配置的任务,所以说,一个Grunt管理工具,最重要的是Gruntfile这个文件,因为里面存放着我们的task任务。

Gruntfile文件的主要作用有两个:

  • 配置或定义自己的任务task

  • 加载grunt插件


三、搭建

对于一个新的前端项目搭建,我们会如何配合grunt来做呢?

  • 1.首先创建一个文件夹(目录),例如叫project

  • 2.然后进入project的根目录,我们通过npm init先把package.json这个文件创建起来,新手的话,可以直接一直按回车一直按到创建完毕,以后会详细说这个npm init创建package.json里面的内容究竟有什么用。

  • 3.现在在package.json同级目录下(即project的根目录),创建一个名字为Gruntfile.js,然后编写以下代码

但是现在执行grunt的话就会报错,为什么呢,因为需要安装Gruntfile当中使用了的插件,例如现在用到了grunt-contrib-uglify所以我们需要通过以下命令安装一下。

npm install grunt-contrib-uglify --save-dev

这时候grunt-contrib-uglify这个名称和对应它的版本会写入到package.json

OK!,到了这里就可以去到project的根目录运行grunt命令了,如果没有任何参数带上,就是执行default定义的任务。registerTask函数有2个参数,自定义的任务名和任务列表,任务列表就是一个字符串数组,可以指定一个或多个任务。

grunt.registerTask注册完任务后,就可以执行grunt命令了,例如"grunt", "grunt default", "grunt uglify"等。

现在的目录结构就是


四、插件介绍

Grunt的插件是有很多的,但是经常用的,就那几个,现在就总结一下,哈。

插件名称 插件描述
grunt-contrib-watch 监控文件有修改的时候,运行指定的任务
grunt-contrib-clean 删除指定的文件和文件夹
grunt-contrib-copy 复制指定的文件和文件夹
grunt-contrib-uglify 使用uglifyJS压缩js文件
grunt-contrib-jshint 使用JSHint验证Js文件
grunt-contrib-concat 合并多个文件
grunt-contrib-less 将Less文件编译成css文件
grunt-contrib-cssmin 压缩css文件

目前这些就是最常用的插件,用在项目上比较多,如果需要的话,可以上官网http://www.gruntjs.net/plugins来查看插件列表。

五,总结

Grunt的使用大概就是这样,到这里应该感觉到工程化的魅力,但是本人在实际开发grunt是用得较少,因为有gulp的出现后,grunt我可以说是弃用了,但是为什么我还要介绍grunt呢,其实就想大家对工程化中的任务管理task这个东西有一个了解,因为到了后面gulp的使用,也是和grunt差不多,可能就是一些配置上的写法差异,到这里,希望大家多练习一下,跟着例子,搭建一个属于自己的一个grunt工程化项目,以后就可以复用你自己搭建的工程化项目来进行开发了。

 上图就是Grunt的Logo,大家请认识下,以后可以适当的在面试装装逼,哈。


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,176评论 5 469
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,190评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,232评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,953评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,879评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,177评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,626评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,295评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,436评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,365评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,414评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,096评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,685评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,771评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,987评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,438评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,032评论 2 341

推荐阅读更多精彩内容

  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Gru...
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,566评论 18 139
  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。 在安...
    angelwgh阅读 1,095评论 0 0
  • 《等腰三角形》教学设计,不同于前面的《三角形》复习课,也与《尺规作图》这样的归纳提升课有所区别。前两种都是在学生已...
    不忘初心静等花开阅读 871评论 0 1
  • 三年过去了,素织看着窗外的雪景,不禁深深叹了口气,自从三年前附子把他从家里送出来后,就再也没来看过他,他虽没说什么...
    谁还没有脾气阅读 91评论 0 0