时间戳

首页 > 解决方案 > 使用 Grunt for AngularJS 项目创建缩小的 js 文件

angularjs - 使用 Grunt for AngularJS 项目创建缩小的 js 文件

问题描述

我有一个现有的 AngularJS 项目，其中包含大量控制器和 HTML 页面。我需要使用 Grunt 创建缩小的 JS 文件。问题是我无法与 Grunt 合作。每当我运行 grunt 命令时，我总是会收到错误消息：

'grunt' 不是内部或外部命令、可运行程序或批处理文件。

我试着跑步

npm install
npm install -g
npm install -g grunt-cli
npm install grunt --save-dev

以上命令都不适合我。有人可以指出与 Grunt 合作的分步过程吗？这是 package.json 的样子：

{
  "name": "grunt-cache-bust",
  "description": "Bust static assets from the cache using content hashing",
  "version": "0.6.0",
  "author": "Ben Holland <hi@benholland.me>",
  "repository": {
    "type": "git",
    "url": "git://github.com/hollandben/grunt-cache-bust.git"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/hollandben/grunt-cache-bust/blob/master/LICENSE-MIT"
    }
  ],
  "engines": {
    "node": ">= 0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  },
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-contrib-clean": "~0.6.0",
    "grunt-contrib-copy": "~0.8.0",
    "grunt-contrib-jshint": "~0.11.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-watch": "~0.6.1"
  },
  "peerDependencies": {
    "grunt": "~0.4.5"
  },
  "dependencies": {
    "cheerio": "~0.18.0",
    "css": "~2.2.0",
    "flatten": "~0.0.1",
    "path-is-absolute": "^1.0.0"
  },
  "keywords": [
    "grunt",
    "grunt plugin",
    "cache",
    "bust",
    "bust assets"
  ]
}

标签： angularjsgruntjs

解决方案

脚步：

  1. 下载并安装 nodejs：https ://nodejs.org/en/
  2. 下载并安装 npm https://www.npmjs.com/get-npm
  3. 使用 npm 全局安装 Grunt CLI：npm install -g grunt-cli
  4. 打开你的项目文件夹：cd <your_project>
  5. 在本地 node_modules 文件夹中安装依赖项：npm install

检查是否已安装所有内容：

  1. node -v显示节点的版本
  2. npm -v显示 npm 的版本
  3. grunt -V（“V”在这里是大写的）显示咕噜声的版本

之后，您必须创建Gruntfile.js以缩小您的 js 文件。像这样在那里注册 grunt 任务：

grunt.registerTask('default', [
   ... 
]);

并使用 npm 包grunt-contrib-uglify。如果需要选项，您也可以使用grunt-babel 。minified

推荐阅读