简单介绍grunt:
安装及配置步骤:
1. 安装nodejs
官网下载 node-v4.2.2.pkg,按照后,同时安装了node 和npm,它将在你的机器上安装 Node.js和 npm (node package manager)。
2. 安装grunt-cli
“CLI”被翻译为“命令行”。要想使用grunt,首先必须将grunt-cli安装到全局环境中,使用nodejs的“npminstall…”进行安装。打开控制台(注意:windows系统下请使用管理员权限打开),输入:npm install -g grunt-cli,注意,mac os系统、部分linux系统中,在这句话的前面加上“sudo ”指令。安装完成后,这时候要验证一下grunt-cli是否安装完成并生效,你只需要继续在命令行中输入“grunt”命令即可。如果生效,则会出现以下结果:
你不要管这些结果是什么意思,总之出现这些提示,证明你的grunt-cli安装成功了。注意:我们可以在机器上同时安装多个不同版本的Grunt(package.json)。Grunt CLI用来运行配置好Gruntfile.js的Grunt。
3. 创建项目结构
Grunt是应用于实际项目的,所以我们得有一个简单的测试网站来演示grunt的安装、使用。首先,我在Documents目录下面建了一个“grunt_test”文件夹,里面建了三个空文件夹、两个空文档,名称如下图。(注意 Gruntfile.js 文件的首字母大写!)
执行如下命令:
目录结构如下:
其他的东西先不要管,先把package.json这个文件写一些东西。记住,既然文件后缀名叫“json”,那么文件中的格式肯定是严格的json格式。package.json内容如下所示,否则,无法将grunt及插件信息写入package.json中的“devDependencies”。package.json可以使用npm init命令来创建,过程中需要回答一些配置问题。
4. 安装grunt
接下来我们会有一系列插件的安装,他们的安装过程和grunt一样。但是他们的执行都是基于grunt的,因此才能把grunt叫做一个“构建工具”。Grunt没有具体的作用,但是它能把有具体作用的一个一个插件组合起来,形成一个整体效应。
注意,这里安装grunt不再是全局安装了,需要你在控制台进入到网站或系统的具体目录下。这里我们进入grunt_test目录下。然后输入以下命令,npm install grunt --save-dev,执行成功,则如下图所示,解释的是,“—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项,即写入package.json中的“devDependencies”。
现在第一时间打开package.json去看看,那里的“devDependencies”有什么变化。我这里的变化如下图,看看你的是不是和我的一样?
然后,你再看看文档目录中的文件或者文件夹有什么变化?我这里多了一个“node_modules”文件夹,其中有一个“grunt”文件夹,其中有若干文档。这里就是存储grunt源文件的地方。
现在命令行运行grunt,如下图所示,表示grunt已经在这个目录下成功安装。
那么,为何我们在刚才执行grunt时候会有Warning提示呢?根据提示,我们得知的信息是:Task “default” not found ,如何搞定这个问题?——我们继续往下看啊。
注意:区别devDependencies和dependencies,如果你不想用devDependencies,安装的时候使用npm install –production,更多区别可以查看http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies
5. 配置gruntfile.js
Gruntfile配置文件包含4部分:
根据需要,首先将gruntfile.js设置为如下格式:
此时,再运行grunt,显示如下所示,表示配置成功,但是我们并没有引入插件,继续往下进行。
6. grunt插件介绍
进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ,我们能看到grunt到目前位置的所有插件。现在里面有6179个插件,这个数量每天都在增加。
插件分为两类。第一类是grunt团队贡献的插件,这些插件的名字前面都带有“contrib-”前缀,而且在插件列表中有星号标注。第二类是第三方提供的插件,不带有这两个特征。
咱们主要用到以下插件:
7. uglify插件介绍
Uglify插件的功能就是压缩javascript代码。至于javascript代码压缩的必要和意义,这里就不用在赘述了吧?几乎每一个javascript类库或者框架都有一个 **.min.js 压缩版。
要安装一个插件,首先要进入这个插件在grunt官网的说明文档页面。我们在grunt官网插件列表页面,找到“contrib-uglify”点击进入。你要看这里面的说明,然后根据说明进行安装。这里我们只讲重点。
安装uglify插件的方式,和安装grunt是一样的。如下:npm install grunt-contrib-uglify --save-dev
这里又出现了熟悉的“—save-dev”,具体的作用在上文安装grunt时已经说过了,不再赘述。运行这句命令。安装完成之后,你会看到package.json中“devDependencies”节点的变化,以及“node_modules”文件夹里的变化。现在还不能用,还需要在Gruntfile.js做配置。我们既然要使用uglify来压缩javascript代码,当然得创建一个js文件来做实验。我们在现有的“src”文件夹中新建一个文件夹“lib”和“utility”,分别存放“angular.js”和“test.js” 。
测试文件建立好了。我们接下来就要把这两个js文件进行压缩。当然,要压缩谁?往哪里压缩?这些都需要配置,在Gruntfile.js中配置。分为三步:
第一步,在grunt.initConfig方法中配置 uglify的配置参数。如下图:
上图中,对uglify的配置有两项。
再去看看,是否生成了2个压缩后的js文件?angular.min.js,如下所示:
test.min.js,如下所示:
果然。根据package.json中的name和version生成了文件名。而且,压缩后的代码的banner也是符合Gruntfile.js中的配置要求的。
以上就是uglify插件的详细安装、配置说明。Javascript使用uglify压缩,css可使用cssmin插件压缩。安装、配置方法一样的,不再赘述。
8. 使用watch插件(真正实现自动化)
你可能一直有一个疑问,上面讲的插件中,每次执行插件功能,都得执行一遍“grunt”命令,这样的操作非常繁琐,说好的“自动化”呢?别着急,接下来就解决这个问题——通过watch插件解决这个问题。
首先安装watch插件,如果安装不再赘述了。接下来要配置watch插件,配置分为三个步骤,不再详细描述了,只贴图说明。
第一步。配置watch将监控哪些文件的变化,以及这些文件一旦变化,要立即执行哪些插件功能。如下图,watch将监控src文件夹下所有js文件的变化,一旦变化,则立即执行uglify这个插件功能。
第二步,
第三步,
这三步执行完了,即watch插件配置完成。运行grunt命令,控制台提示watch已经开始监听。此时要想停止,按ctrl + c即可。
既然在监听,我们试一试看监听有没有效。我们将 test.js 代码进行修改,结果显示,watch检查到了test.js文件的变化,并重新压缩test.js。