Grunt基本使用-V1.0
2016-03-26 18:01
190 查看
浅语：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命令：
npminstall-ggrunt-cli
第二步：进入一个你创建的文件夹，执行npminit，生成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
安装gruntnpminstallgrunt--save-dev
**–save-dev表示会把刚安装的东西添加到package.json文件。
其他的文件也是这样的命令：
npminstallgrunt-contrib-jshint--save-dev
自己需要什么插件可以去github下载，有很多有趣的插件：
安装完成后就可以在json文件以来项目中看到了：
目录结构：
第四步：查看grunt版本
grunt--version
第五步：创建Gruntfile.js文件，用来执行grunt我们所需要的命令
文件格式：
第六步：
操作1：合并文件
合并js文件下的a.js与b.js到一个新文件
Gruntfile.js内容：
运行：gruntconcatjs
运行成功！
查看目录文件：
生成aAndB.js；并且文件内容以"；"分隔；
操作二：压缩，检查文件
Gruntfile.js内容：
jshint检查一直报错！
因为
中的第二行，一直缺少一个分号！
去掉分号也是一直报错，说当时合并文件的时候用来分隔的";"是不需要的！晕
去掉后，jshint就检查对了。
查看目录文件：
第七步：实际项目中就这样？每次手动？当然不是！
grunt还有一个神器：watch!
操作一：监听GruntDemo下的一个html文件,并添加监听！
Gruntfile.js内容：
启动监听：
更改页面：不断更改页面文件，并保存的时候。控制台会连续打印。
操作二：监听js文件改变，并且当改变后，进行jshint检查与压缩。
执行gruntwatchJs
文档目录：
修改shop.js文件后，又执行检查与压缩的命令。
我们也可以使用时间来作为戳。
第八步：上传我们的文件至github
先pull
再push
查看github,已经上去了。大功告成！
第一步：Grunt依赖Node.js所以在安装之前确保你安装了Node.js。然后开始安装Grunt。
实际上，安装的并不是Grunt，而是Grunt-cli，也就是命令行的Grunt，这样你就可以使用grunt命令来执行某个项目中的Gruntfile.js中定义的task。但是要注意，Grunt-cli只是一个命令行工具，用来执行，而不是Grunt这个工具本身。
安装Grunt-cli需要使用NPM，使用下面一行即可在全局范围安装Grunt-cli，换句话说，就是你可以在任何地方执行grunt命令：
npminstall-ggrunt-cli
第二步：进入一个你创建的文件夹，执行npminit，生成package.json文件。
package.json应当放置于项目的根目录中，与Gruntfile.js在同一目录中>
第三步：安装插件来执行我们需要的命令：
合并文件：
语法检查：
Scss编译：
压缩文件：
监听文件变动：
建立本地服务器：
初始的文件夹：
初始的目录状态：package.json
安装gruntnpminstallgrunt--save-dev
**–save-dev表示会把刚安装的东西添加到package.json文件。
其他的文件也是这样的命令：
npminstallgrunt-contrib-jshint--save-dev
自己需要什么插件可以去github下载，有很多有趣的插件：
安装完成后就可以在json文件以来项目中看到了：
目录结构：
第四步：查看grunt版本
grunt--version
第五步：创建Gruntfile.js文件，用来执行grunt我们所需要的命令
文件格式：
第六步：
操作1：合并文件
合并js文件下的a.js与b.js到一个新文件
Gruntfile.js内容：
运行：gruntconcatjs
运行成功！
查看目录文件：
生成aAndB.js；并且文件内容以"；"分隔；
操作二：压缩，检查文件
Gruntfile.js内容：
jshint检查一直报错！
因为
中的第二行，一直缺少一个分号！
去掉分号也是一直报错，说当时合并文件的时候用来分隔的";"是不需要的！晕
去掉后，jshint就检查对了。
查看目录文件：
第七步：实际项目中就这样？每次手动？当然不是！
grunt还有一个神器：watch!
操作一：监听GruntDemo下的一个html文件,并添加监听！
Gruntfile.js内容：
启动监听：
更改页面：不断更改页面文件，并保存的时候。控制台会连续打印。
操作二：监听js文件改变，并且当改变后，进行jshint检查与压缩。
执行gruntwatchJs
文档目录：
修改shop.js文件后，又执行检查与压缩的命令。
我们也可以使用时间来作为戳。
第八步：上传我们的文件至github
先pull
再push
查看github,已经上去了。大功告成！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Node.js之HTTP请求与响应
- c面向对象编程例子
- 基于java的Udp探索，DatagramSocket ，DatagramPacket
- php生成静态页面
- CCF系列之最大的矩形(201312-3)
- PAT (Advanced Level) Practise 1112 Stucked Keyboard (20)
- 创建第一个OpenGL窗口
- Aspectj很强大啊
- Struts2学习笔记
- 用十条命令在一分钟内检查 4000 Linux 服务器性能
- Web开发_问题解决（2）之获取上一个页面的a标签的参数值
- Listview item里面的textView.setMovementMethod(LinkMovementMethod.getInstance()) 让listview 点击生效解决方法
- CodeForces - 560D Equivalent Strings （DFS）
- Unity从HelloWord开始
- 六、帮助命令
- ListView的下拉刷新和上拉加载
- iOS—Storyboard的简单使用
- 动态规划-优化编辑器问题
- 黑帽SEO技术和白帽SEO技术有什么区别？
- Java final 修饰符知识点总结