目前正在编写公司的部分组件，可能一个组件会包含很多js和css，为了项目上使用方便，应该压缩成一个js库，以供开发者使用，同时也可以减少很多http请求，提高页面访问速度。基于此，学习了grunt自动化构建工具。学习文章：http://developer.51cto.com/art/201506/479127.htm。不过我根据自己的实际情况，有些东西做了一些改动，同时记录下来，后面也会用到。下面单刀直入，直接讲怎么用：

1、安装nodejs。安装过程略。下载路径:https://nodejs.org/en/  。检查安装是否成功：打开cmd，输入node -v,如果出现以下界面，表示安装成功。

2、安装grunt-cli。打开cmd、输入npm install -g grunt-cli。出现以下信息，表示安装成功。

3、打开项目目录 ，在项目的根目录下新建配置文件：Gruntfile.js和package.json两个文件。其中package.json文件中先写入以下内容：

  1. {
  2.   "name": "vetech.select",
  3.   "version": "1.0",
  4.   "devDependencies": {
  5.    }
  6. }

4、安装grunt：cmd切换到项目的根目录下，并输入：npm install grunt -save-dev。工程目录下有以下目录表示安装成功。

5、配置Gruntfile.js文件：

  1.  //包装函数
  2.  module.exports = function(grunt){
  3.      //任务配置，所有插件的配置信息
  4.      grunt.initConfig({
  5.         //获取package.json的信息
  6.         pkg:grunt.file.readJSON("package.json")
  7.      });
  8.      //告诉grunt当我们在终端输入grunt时，需要做些什么（有先后顺序）
  9.     grunt.registerTask("default",[]);
  10.  };

6、cmd中执行grunt命令，看是否配置成功。

7、安装插件：由于在项目中，并不是每个js都是独立的文件，有时候每个js可能会存在依赖关系。所以在安装插件的时候，先安装合并插件、再安装校验插件、压缩插件，最后安装自动化构建插件。所有的插件安装必须要切换到项目的根目录下执行才行,另外，每次安装一个插件最好是执行一下grunt命令，看是否安装和配置成功。

  • 合并插件：https://www.npmjs.com/package/grunt-contrib-concat
    • 安装命令：npm install grunt-contrib-concat --save-dev
    • Gruntfile.js配置： 
      1.   //包装函数
      2.   module.exports = function(grunt){
      3.       //任务配置，所有插件的配置信息
      4.       grunt.initConfig({
      5.          //获取package.json的信息
      6.          pkg:grunt.file.readJSON("package.json"),
      7.          //合并插件：
      8.          concat:{
      9.               js:{
      10.                   src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
      11.                   dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
      12.               },
      13.               css:{
      14.                   src:["css/style.css","css/radio.css"],
      15.                   dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
      16.               }
      17.           }
      18.  
      19.       });
      20.       grunt.loadNpmTasks("grunt-contrib-concat");
      21.  
      22.       //告诉grunt当我们在终端输入grunt时，需要做些什么（有先后顺序）
      23.      grunt.registerTask("default",["concat"]);
      24.   };

    • 说明： 在配置dest路径的时候，在build目录下新建了一个debug文件夹，所有的js和css合并以后都放在这里，这样做的好处有有两个：1、在校验和压缩的时候，只需要校验和压缩这两个文件即可；2、对于项目上对组件使用可能出问题，可以直接用合并的js作为调试文件来找出问题原因。

  • js校验插件：https://www.npmjs.com/package/grunt-contrib-jshint
    • 安装命令：npm install grunt-contrib-jshint --save-dev
    • Gruntfile.js配置： 
      1.   //包装函数
      2.   module.exports = function(grunt){
      3.       //任务配置，所有插件的配置信息
      4.       grunt.initConfig({
      5.          //获取package.json的信息
      6.          pkg:grunt.file.readJSON("package.json"),
      7.          //合并插件：
      8.          concat:{
      9.               js:{
      10.                   src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
      11.                   dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
      12.               },
      13.               css:{
      14.                   src:["css/style.css","css/radio.css"],
      15.                   dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
      16.               }
      17.           },
      18.           //js语法校验插件
      19.           jshint:{
      20.               build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
      21.               options:{
      22.                   jshintrc:".jshintrc"
      23.               }
      24.           }
      25.       });
      26.       grunt.loadNpmTasks("grunt-contrib-concat");
      27.       grunt.loadNpmTasks("grunt-contrib-jshint");
      28.       //告诉grunt当我们在终端输入grunt时，需要做些什么（有先后顺序）
      29.      grunt.registerTask("default",["concat","jshint"]);
      30.   };

    备注：在js校验的时候，像JQuery、$、angular等等，校验不会通过，此时需要预先定义，参考文章：http://stackoverflow.com/questions/20837139/jshint-r10-angular-is-not-defined。另外，在校验的时候，还需要在Gruntfile.js文件的同级目录下新建一个.jshintrc文件，文件中编写要校验的规则。格式如下，规则参考：http://my.oschina.net/wjj328938669/blog/637433?p=1

    1.  {
    2.     "boss":false,
    3.     "curly":false,
    4.     "eqeqeq":false,
    5.     "eqnull":true,
    6.     "expr":true,
    7.     "immed":true,
    8.     "newcap":true,
    9.     "noempty":true,
    10.     "noarg":true,
    11.     "undef":true,
    12.     "regexp":true,
    13.  
    14.     "browser":true,
    15.     "devel":true,
    16.     "node":true,
    17.     "predef": ["ActiveXObject"]
    18.  }
  • css校验插件：https://www.npmjs.com/package/grunt-contrib-csslint
    • 安装命令：npm install grunt-contrib-csslint --save-dev
    • Gruntfile.js配置： 
      1.   //包装函数
      2.   module.exports = function(grunt){
      3.       //任务配置，所有插件的配置信息
      4.       grunt.initConfig({
      5.          //获取package.json的信息
      6.          pkg:grunt.file.readJSON("package.json"),
      7.          //合并插件：
      8.          concat:{
      9.               js:{
      10.                   src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
      11.                   dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
      12.               },
      13.               css:{
      14.                   src:["css/style.css","css/radio.css"],
      15.                   dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
      16.               }
      17.           },
      18.           //js语法校验插件
      19.           jshint:{
      20.               build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
      21.               options:{
      22.                   jshintrc:".jshintrc"
      23.               }
      24.           },
      25.           //css语法校验
      26.           csslint:{
      27.               build:["build/debug/<%=pkg.name%>.debug.css"],
      28.               options:{
      29.                   csslintrc:".csslintrc"
      30.               }
      31.           }
      32.       });
      33.       grunt.loadNpmTasks("grunt-contrib-concat");
      34.       grunt.loadNpmTasks("grunt-contrib-jshint");
      35.       grunt.loadNpmTasks("grunt-contrib-csslint");
      36.  
      37.       //告诉grunt当我们在终端输入grunt时，需要做些什么（有先后顺序）
      38.      grunt.registerTask("default",["concat","jshint","csslint"]);
      39.   };
    • 备注： css校验插件也需要一个.csslintrc文件，同样是在Gruntfile.js的同级目录下。格式如下，配置参考：https://atom.io/packages/csslint

      1.  {
      2.     "adjoining-classes":false,
      3.     "box-sizing":false,
      4.     "box-model":false,
      5.     "compatible-vendor-prefixes":false,
      6.     "floats":false,
      7.     "font-sizes":false,
      8.     "gradinents":false,
      9.     "important":false,
      10.     "known-properties":false,
      11.     "outline-none":false,
      12.     "qualified-headings":false,
      13.     "regex-selectors":false,
      14.     "shorthand":false,
      15.     "text-indent":false,
      16.     "unique-headings":false,
      17.     "universal-selector":false,
      18.     "unqualified-attributes":false
      19.  }
  • JS压缩插件：https://www.npmjs.com/package/grunt-contrib-uglify

    • 安装命令：npm install grunt-contrib-uglify --save-dev
    • Gruntfile.js配置： 
      1.   //包装函数
      2.   module.exports = function(grunt){
      3.       //任务配置，所有插件的配置信息
      4.       grunt.initConfig({
      5.          //获取package.json的信息
      6.          pkg:grunt.file.readJSON("package.json"),
      7.          //合并插件：
      8.          concat:{
      9.               js:{
      10.                   src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
      11.                   dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
      12.               },
      13.               css:{
      14.                   src:["css/style.css","css/radio.css"],
      15.                   dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
      16.               }
      17.           },
      18.           //js语法校验插件
      19.           jshint:{
      20.               build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
      21.               options:{
      22.                   jshintrc:".jshintrc"
      23.               }
      24.           },
      25.           //css语法校验
      26.           csslint:{
      27.               build:["build/debug/<%=pkg.name%>.debug.css"],
      28.               options:{
      29.                   csslintrc:".csslintrc"
      30.               }
      31.           },
      32.           //js压缩
      33.           uglify:{
      34.               options:{
      35.                   stripBanners:true,
      36.                   banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
      37.               },
      38.               build:{
      39.                   mangle:true, //变量名混淆
      40.                   src:"build/debug/*.js",
      41.                   dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.js"
      42.               }
      43.           }
      44.       });
      45.       grunt.loadNpmTasks("grunt-contrib-concat");
      46.       grunt.loadNpmTasks("grunt-contrib-jshint");
      47.       grunt.loadNpmTasks("grunt-contrib-csslint");
      48.       grunt.loadNpmTasks("grunt-contrib-uglify");
      49.  
      50.       //告诉grunt当我们在终端输入grunt时，需要做些什么（有先后顺序）
      51.      grunt.registerTask("default",["concat","jshint","csslint","uglify"]);
      52.   };
  • css压缩插件：https://www.npmjs.com/package/grunt-contrib-cssmin
    • 安装命令：npm install grunt-contrib-cssmin --save-dev
    • Gruntfile.js配置： 
      1.   //包装函数
      2.   module.exports = function(grunt){
      3.       //任务配置，所有插件的配置信息
      4.       grunt.initConfig({
      5.          //获取package.json的信息
      6.          pkg:grunt.file.readJSON("package.json"),
      7.          //合并插件：
      8.          concat:{
      9.               js:{
      10.                   src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
      11.                   dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
      12.               },
      13.               css:{
      14.                   src:["css/style.css","css/radio.css"],
      15.                   dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
      16.               }
      17.           },
      18.           //js语法校验插件
      19.           jshint:{
      20.               build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
      21.               options:{
      22.                   jshintrc:".jshintrc"
      23.               }
      24.           },
      25.           //css语法校验
      26.           csslint:{
      27.               build:["build/debug/<%=pkg.name%>.debug.css"],
      28.               options:{
      29.                   csslintrc:".csslintrc"
      30.               }
      31.           },
      32.           //js压缩
      33.           uglify:{
      34.               options:{
      35.                   stripBanners:true,
      36.                   banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
      37.               },
      38.               build:{
      39.                   mangle:true, //变量名混淆
      40.                   src:"build/debug/*.js",
      41.                   dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.js"
      42.               }
      43.           },
      44.           //css压缩
      45.           cssmin:{
      46.               options:{
      47.                   stripBanners:true,
      48.                   banner:'/*! <%=pkg.name%>-<%=pkg.version%>.css <%=grunt.template.today("yyyy-mm-dd")%> */\n'
      49.               },
      50.               build:{
      51.                   src:"build/debug/*.css",
      52.                   dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.css"
      53.               }
      54.           }
      55.  
      56.       });
      57.       grunt.loadNpmTasks("grunt-contrib-concat");
      58.       grunt.loadNpmTasks("grunt-contrib-jshint");
      59.       grunt.loadNpmTasks("grunt-contrib-csslint");
      60.       grunt.loadNpmTasks("grunt-contrib-uglify");
      61.       grunt.loadNpmTasks("grunt-contrib-cssmin");
      62.  
      63.       //告诉grunt当我们在终端输入grunt时，需要做些什么（有先后顺序）
      64.      grunt.registerTask("default",["concat","jshint","csslint","uglify","cssmin"]);
      65.   };
  • 自动化构建：https://www.npmjs.com/package/grunt-contrib-watch
    • 安装命令：npm install grunt-contrib-watch --save-dev
    • Gruntfile.js配置： 
      1.   //包装函数
      2.   module.exports = function(grunt){
      3.       //任务配置，所有插件的配置信息
      4.       grunt.initConfig({
      5.          //获取package.json的信息
      6.          pkg:grunt.file.readJSON("package.json"),
      7.          //合并插件：
      8.          concat:{
      9.               js:{
      10.                   src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
      11.                   dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
      12.               },
      13.               css:{
      14.                   src:["css/style.css","css/radio.css"],
      15.                   dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
      16.               }
      17.           },
      18.           //js语法校验插件
      19.           jshint:{
      20.               build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
      21.               options:{
      22.                   jshintrc:".jshintrc"
      23.               }
      24.           },
      25.           //css语法校验
      26.           csslint:{
      27.               build:["build/debug/<%=pkg.name%>.debug.css"],
      28.               options:{
      29.                   csslintrc:".csslintrc"
      30.               }
      31.           },
      32.           //js压缩
      33.           uglify:{
      34.               options:{
      35.                   stripBanners:true,
      36.                   banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
      37.               },
      38.               build:{
      39.                   mangle:true, //变量名混淆
      40.                   src:"build/debug/*.js",
      41.                   dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.js"
      42.               }
      43.           },
      44.           //css压缩
      45.           cssmin:{
      46.               options:{
      47.                   stripBanners:true,
      48.                   banner:'/*! <%=pkg.name%>-<%=pkg.version%>.css <%=grunt.template.today("yyyy-mm-dd")%> */\n'
      49.               },
      50.               build:{
      51.                   src:"build/debug/*.css",
      52.                   dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.css"
      53.               }
      54.           },
      55.           //自动化构建
      56.           watch:{
      57.               build:{
      58.                   files:["Gruntfile.js","js/*.js","css/*.css"],
      59.                   tasks:["concat","jshint","csslint","uglify","cssmin"],
      60.                   options:{spawn:false}
      61.               }
      62.           }
      63.  
      64.       });
      65.       grunt.loadNpmTasks("grunt-contrib-concat");
      66.       grunt.loadNpmTasks("grunt-contrib-jshint");
      67.       grunt.loadNpmTasks("grunt-contrib-csslint");
      68.       grunt.loadNpmTasks("grunt-contrib-uglify");
      69.       grunt.loadNpmTasks("grunt-contrib-cssmin");
      70.       grunt.loadNpmTasks("grunt-contrib-watch");
      71.  
      72.       //告诉grunt当我们在终端输入grunt时，需要做些什么（有先后顺序）
      73.      grunt.registerTask("default",["concat","jshint","csslint","uglify","cssmin","watch"]);
      74.   };

执行完以上的所有操作，基本上可以满足js和css的校验、合并和压缩。最后执行grunt，会发现根据Gruntfile.js配置的，生成相应的文件，前提是js和css不会存在错误。下图是执行grunt以后生成的文件：

最后，直接把app中的文件拷贝到项目中去使用即可。对于watch插件，指定监听哪些文件，一旦文件发生变化，会重新构建。如果有新的项目需要自动化构建，那么只需要将Gruntfile.js、package.json、两个以.开头的配置文件拷贝过去，在根目录下执行：npm install，一次性安装好所有的插件。然后修改Gruntfile.js以满足当前项目需要。

grunt的学习和使用的更多相关文章

  1. Grunt入门学习之(1) -- 环境安装

    Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

  2. Grunt入门学习之(3) -- Gruntfile具体示例

    经过前面的学习,将测试的Gruntfile整合在一起! /** * Created by Administrator on 2017/6/22. */ module.exports = functio ...

  3. 自动化构建工具grunt的学习

    关于grunt的一些记录,记的比较乱... 0.删除node_modules文件夹 命令行: npm install rimraf -g //先运行 rimraf node_modules //然后运 ...

  4. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  5. Grunt之学习历程（转自网上资源-整理自用）

    认识Grunt Grunt中文文档 安装Node环境 CNode 配置Grunt Grunt中文文档-配置任务 什么是package.json package.json中文文档 关于Grunt资料 应 ...

  6. 【grunt】grunt 基础学习

    1. 干啥的呢? 项目打包管理,用处有 1)可用于压缩合并前端文件,包括css/js , 2)可用于管理发布文件与开发文件,3)可用于自动编译less 文件 2. 常用的东西有哪些呢? 常用的插件有 ...

  7. Grunt入门学习之(2) -- Gruntfile的编写

    Gruntfile由以下几部分构成: "wrapper" 函数 项目与任务,目标配置 加载grunt插件和任务 自定义任务 1.wrapper函数(包装函数) 每一个 Gruntf ...

  8. 【grunt整合版】30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  9. 【grunt第二弹】30分钟学会使用grunt打包前端代码（02）

    前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...

随机推荐

  1. 用C#在Visual Studio写Javascript单元测试（Firefox内核）

    引用nuget包: 注意:Geckofx45 nuget包必须是最后引用,否则初始化会出错 编写JsRunner using Gecko; using System; using System.Col ...

  2. img、a标签的使用

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  3. python包与模块

    Python基础-包与模块 摘要 为重用以及更好的维护代码,Python使用了模块与包:一个Python文件就是一个模块,包是组织模块的特殊目录(包含__init__.py文件). 模块搜索路径,Py ...

  4. soui edit passwrod模式下禁用输入法

    一直在用soui做客户端界面,今天发现密码edit在中文输入法下不能输入密码.我在想难道不是这样吗,密码就该用英文输入法啊. 然后我就用mfc的做了个demo,发现mfc的edit在密码模式下是可以用 ...

  5. 学习MPI并行编程记录

    简单的MPI程序示例 首先,我们来看一个简单的MPI程序实例.如同我们学习各种语言的第一个程序一样,对于MPI的第一个程序同样是"Hello Word". /* Case 1 he ...

  6. BOM对象和DOM对象

    一.BOM对象 BOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相 ...

  7. Linux之日志管理

    日志介绍日志配置日志管理远程日志基于MYSQL的日志 日志介绍日志:历史事件:时间,地点,人物,事件日志级别:事件的关键性程度,Loglevel系统日志服务:sysklogd :CentOS 5之前版 ...

  8. vue数据绑定源码

    思路分析 数据的双向绑定,就是数据变化了自动更新视图,视图变化了自动更新数据,实际上视图变化更新数据只要通过事件监听就可以实现了,并不是数据双向绑定的关键点.关键还是数据变化了驱动视图自动更新. 所有 ...

  9. django访问静态变量的设置

    在项目的urls.py文件中 默认urlpatterns是空的列表需要填入url匹配的路由,默认使用static from django.conf.urls import include, url f ...

  10. HDU 5442 Favorite Donut

    Favorite Donut Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...