Grunt基本使用-V1.0

浅语：grunt中文网：http://www.gruntjs.net/

 

第一步：Grunt 依赖 Node.js 因此在安装以前确保你安装了 Node.js。而后开始安装 Grunt。

实际上，安装的并非 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。可是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具自己。

安装 Grunt-cli 须要使用 NPM，使用下面一行便可在全局范围安装 Grunt-cli ，换句话说，就是你能够在任何地方执行 grunt 命令：

　　npm install -g grunt-cli 

 

第二步：进入一个你建立的文件夹，执行npm init，生成package.json文件。

package.json应当放置于项目的根目录中，与Gruntfile.js在同一目录中>

 

第三步：安装插件来执行咱们须要的命令：

    

• 合并文件：grunt-contrib-concat
• 语法检查：grunt-contrib-jshint
• Scss 编译：grunt-contrib-sass
• 压缩文件：grunt-contrib-uglify
• 监听文件变更：grunt-contrib-watch
• 创建本地服务器：grunt-contrib-connect

 

初始的文件夹：

 

初始的目录状态：package.json

 

安装 grunt npm install grunt --save-dev

 **–save-dev 表示会把刚安装的东西添加到 package.json 文件。

 

其余的文件也是这样的命令：

npm install grunt-contrib-jshint --save-dev

 

本身须要什么插件能够去github下载，有不少有趣的插件：

 

 

安装完成后就能够在json文件以来项目中看到了：

 

目录结构：

 

 

第四步：查看grunt版本

grunt --version

 

第五步：建立Gruntfile.js文件，用来执行grunt咱们所须要的命令

文件格式：

 

第六步：

操做1：合并文件

合并js文件下的a.js与b.js 到一个新文件

 

Gruntfile.js内容：

 

运行：grunt concatjs

运行成功！

 

查看目录文件：

生成aAndB.js；而且文件内容以"；"分隔；

 

操做二：压缩，检查文件

Gruntfile.js内容：

 

jshint检查一直报错！

 

由于中的第二行，一直缺乏一个分号！

去掉分号也是一直报错，说当时合并文件的时候用来分隔的";"是不须要的！晕

 

去掉后，jshint就检查对了。

 

查看目录文件：

 

第七步：实际项目中就这样？每次手动？固然不是！

grunt还有一个神器：watch!

操做一：监听GruntDemo下的一个html文件,并添加监听！

Gruntfile.js内容：

 

启动监听：

更改页面：不断更改页面文件，并保存的时候。控制台会连续打印。

 

操做二：监听js文件改变，而且当改变后，进行jshint检查与压缩。

 

执行grunt watchJs

 

文档目录：

修改shop.js文件后，又执行检查与压缩的命令。

 

咱们也可使用时间来做为戳。

 

第八步：上传咱们的文件至github

 

先pull 

 

再push

 

查看github,已经上去了。大功告成！