自定义GruntJS - package.json配置说明
- Gruntfile配置说明
# 自定义Grunt配置 提供了一个可视化的工具用于生成一个基础的package.json和Gruntfile.js文件. package.json文件用以配置项目的相关依赖; Gruntfile.js用于根据生成的package.json文件配置指定的相关任务依赖信息. - 配置package.js - 配置Gruntfile.js # package.json配置依赖 生成一个基本package.json文件, 用于配置项目的基本信息以及声明构建依赖的插件.
html <form id="packageForm" class="form-horizontal" name="package"> <legend>package.json</legend> <label for="projectName" class="control-label">项目名称</label> <input type="text" id="projectname" name="name" class="input-block-level" value="unnamed project" /> <label for="projectVersion" class="control-label">项目版本</label> <input type="text" id="projectVersion" name="version" class="input-block-level" value="0.0.1" /> <label for="projectDescription" class="control-label">项目描述</label> <input type="text" id="projectDescription" name="description" class="input-block-level" placeholder="description" /> <label for="projectDist" class="control-label">项目构建目录</label> <input type="text" id="projectDist" name="dist" class="input-block-level" value="./dist" /> <label for="" class="control-label">项目依赖</label> <!-- <label for="concat-checkbox" class="checkbox inline"> <input type="checkbox" name="" id="concat-checkbox" value="concat"> concat(代码合并) </label> --> <label for="grunt-contrib-jshint-checkbox" class="checkbox inline"> <input type="checkbox" name="" id="grunt-contrib-jshint-checkbox" value="jshint" /> jshint(js代码检查) </label> <label for="grunt-contrib-uglify-checkbox" class="checkbox inline"> <input type="checkbox" name="" id="grunt-contrib-uglify-checkbox" value="uglify" /> uglify(js代码压缩) </label> <!-- <label for="grunt-contrib-csslint-checkbox" class="checkbox inline"> <input type="checkbox" name="" id="grunt-contrib-csslint-checkbox" value="csslint"> csslint </label> --> <label for="grunt-contrib-cssmin-checkbox" class="checkbox inline"> <input type="checkbox" name="" id="grunt-contrib-cssmin-checkbox" value="cssmin" /> cssmin(css代码压缩) </label> <a class="btn btn-success" download="package.json" id="packageBtn">下载package.json</a> </form>
# Gruntfile.js配置任务 生成一个package.json中配置的项目依赖的详细信息, 用于配置构建任务信息.
Gruntfile.js #### jshint（JS代码检查） #### csslint（CSS代码检查） #### uglify（JS代码压缩） - #### cssmin（CSS代码压缩） - #### 复制项目静态资源 下载Gruntfile.js

package.json配置说明

  • 项目名称
  • [可选]配置所在项目的名称
  • 项目版本
  • [可选]配置项目版本信息
  • 项目描述
  • [可选]配置所在项目的描述信息
  • 项目依赖
  • [可选择任意项]用于配置配置构建任务依赖, 以及使用相关插件构建项目

package.json配置选项中提供了几条默认的配置信息, 分别是main入口, scripts, lisence以及依赖中的grunt选项和copy插件.

一个package.json示例
  1. {
  2.     "name": "Prowork",
  3.     "version": "0.0.1",
  4.     "description": "Prowork",
  5.     "main": "index.js",
  6.     "scripts": {
  7.         "test": "echo \"Error: no test specified\" && exit 1"
  8.     },
  9.     "repository": "",
  10.     "license": "MIT",
  11.     "devDependencies": {
  12.         "grunt": "~0.4.0",
  13.         "grunt-contrib-jshint": "~0.1.1",
  14.         "grunt-contrib-uglify": "~0.1.2",
  15.         "grunt-contrib-cssmin": "~0.5.0",
  16.         "grunt-contrib-csslint": "~0.1.1",
  17.         "grunt-usemin": "~0.1.10",
  18.         "grunt-contrib-concat": "~0.1.3",
  19.         "grunt-htmlhint": "~0.4.0"
  20.     }
  21. }

更多的配置, 可在生成的package.json中手动的添加.

Gruntfile.js配置说明

静态资源复制

用于复制项目中不需要构建发布时处理的文件, 例如图片, 程序源码等文件

  • 静态资源文件
  • 指定一个逗号分割的源文件列表, 可使用匹配模式. 例如'src/*.js/'用于匹配src目录下的所有以.js结尾的文件.
  • 静态资源目标路径
  • 指定一个目标文件路径.
  • 静态资源目录
  • 指定相对于项目文件根目录的资源文件路径

jshint资源文件

  • jshint/csslint资源文件
  • 指定jshint/csslint处理的资源文件路径, 它是一个逗号分割的资源列表.

jshint资源文件

  • uglify/cssmin任务文件列表
  • 指定逗号分割的目标文件:源文件列表.

更多配置可在生成的Gruntfile.js文件中手动的指定配置.