概述
grunt
是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:
① 压缩文件
② 合并文件
③ 简单语法检查
这个工具对我的某个项目目录里面的项目文件做一些操作,比如压缩、查错、合并等。
Grunt 就是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。
Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理。
所以 NPM 生成的 package.json 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作。
Grunt
帮忙实现下面几个功能:检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。
差不多就是这些,根据这些任务需求,需要用到:
合并文件:grunt-contrib-concat
语法检查:grunt-contrib-jshint
Scss 编译:grunt-contrib-sass
压缩文件:grunt-contrib-uglify
监听文件变动:grunt-contrib-watch
建立本地服务器:grunt-contrib-connect
它们的命名和文档都很规范,因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包,比如grunt-contrib-concat - npm 你也可以在这上面看到用法等。
下面我们就要在这个项目中安装这些插件,执行命令:
npm install grunt --save-dev
表示通过 npm 安装了 grunt 到当前项目,同时加上了 –save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中。
可用的 Grunt 命令
grunt dist (仅编译 CSS 和 JavaScript 文件)
重新生成 /dist/ 目录,并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户,大部分情况下你只需要执行这一个命令。
grunt watch (监测文件的改变,并运行指定的 Grunt 任务)
监测 Less 源码文件的改变,并自动重新将其编译为 CSS 文件。
grunt test (运行测试用例)
在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。
grunt docs (编译并测试文档中的资源文件)
编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 bundle exec jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。
grunt (重新构建所有内容并运行测试用例)
编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等,都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。
除错
如果你在安装依赖包或者运行 Grunt 命令时遇到了问题,请首先删除 npm 自动生成的 /node_modules/ 目录,然后,再次运行 npm install 命令。
NPM 使用介绍
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功:
$ npm -v
2.3.0
最后
以上就是调皮超短裙为你收集整理的grunt和NPM简介的全部内容,希望文章能够帮你解决grunt和NPM简介所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复