grunt基础思路+运行于中型项目实战

墨蓝 2022-07-26 11:28 159阅读 0赞

一、Grunt运行步骤

第一步：**搭建环境，主要是nodejs, npm, grunt(grunt-cli)**** **

$ mkdir installGrunt   
$ cd installGrunt   
$ npm install grunt --save-dev  \#如果看到如下信息表示grunt安装成功   
$ grunt --version   
grunt-cli v0.1.13   
grunt v0.4.5   
  
  
第二步：**创建 package.json** ** **  
  
\# 在项目的根目录下创建package.json文件   
（1）根据grunt-init模板自动创建一个特定的package.json文件；（需要先安装 npm install -g grunt-init）   
（2）在命令终端通过npm init命令自动创建一个基本的package.json文件；（亲自测试过）   
（3）从官网上复制或者下载一个package.json文件；（对新手最方便）   
（4）手工创建一个package.json文件；（对高手最方便）   
  
**添加依赖**    
（1）逐个添加，逐个执行命令 $ npm install XXX --save-dev   
XXX是常用插件名，如grunt-contrib-jshint   
最好是全称，不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。   
  
（2）也可以一次在package.json中添加多个插件，然后一次执行命令 $ npm install   
安装声明的依赖关系grunt插件同时， 在项目根目录下添加一个node\_modules目录，目录中放置对应grunt插件所需的插件目录名。   
注：当你给npm install添加 --save-dev标志是，一个波浪线范围将被用于你的package.json中。（建议）

第三步：**创建Gruntfile.js**** **

\# 添加自己合适的gruntfile配置，运行，得出预期输出   
module.exports=function(grunt)\{   
    //任务配置   
    grunt.initConfig(\{   
    \});   
    //载入任务   
    grunt.loadNpmTasks();   
    //注册任务   
    grunt.registerTask();   
\}   
内容参见demo1   
  
$ grunt     \#   
  
运行成功，在目标目录下创建了一个压缩后的js，引用压缩后的js，效果一样。

**总结**：上面是一个简单的运行步骤，具体一些内容请看官网 [http://www.gruntjs.net/][http_www.gruntjs.net] ，如果对于Gruntfile.js里面需要用到一些依赖库不会使用的可以去npm官网参看 [https://www.npmjs.com/][https_www.npmjs.com]，如果对于Grunt使用存在很多问题，可以去Grunt推荐的社区找寻答案 [http://www.stackoverflow.com/][http_www.stackoverflow.com]。

参考文档：   
[http://www.k68.org/?p=1232][http_www.k68.org_p_1232]    
  
  
  
二、Grunt中型项目实战  
  
github上面找到的经典案例：   
[https://github.com/seajs/seajs/issues/672][https_github.com_seajs_seajs_issues_672]

三、常用插件

grunt-contrib-jshint（js语法检查）

grunt-contrib-uglify（采用UglifyJS压缩js）   
grunt-contrib-concat（js合并）   
grunt-contrib-cssmin（Css压缩合并）   
grunt-htmlhint（html语法验查）

[http_www.gruntjs.net]: http://www.gruntjs.net/
[https_www.npmjs.com]: https://www.npmjs.com/
[http_www.stackoverflow.com]: http://www.stackoverflow.com/
[http_www.k68.org_p_1232]: http://www.k68.org/?p=1232
[https_github.com_seajs_seajs_issues_672]: https://github.com/seajs/seajs/issues/672