1、执行 npm update -g npm
指令进行升级(在某些系统中可能需要 sudo
指令)。
npm install -g grunt-cli
上述命令执行完后,grunt
命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
注意,安装grunt-cli
并不等于安装了 Grunt!
一般需要在你的项目中添加两份文件:package.json
和 Gruntfile
。
package.json
应当放置于项目的根目录中,
{ "name": "grunt-feng", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0" } }
Gruntfile.js
或 Gruntfile.coffee
文件是有效的 JavaScript 或 CoffeeScript 文件,应当放 在你的项目根目录中,和package.json
文件在同一目录层级,并和项目源码一起加入源码管理 器。
Gruntfile由以下几部分构成:
- "wrapper" 函数
- 项目与任务配置
- 加载grunt插件和任务
- 自定义任务
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { // 定义一个用于插入合并输出文件之间的字符 separator: ';' }, dist: { // 将要被合并的文件 src: ['src/**/*.js'], // 合并后的JS文件的存放位置 dest: 'dist/<%= pkg.name %>.js' } } }); // 加载包含 "concat" 任务的插件。 grunt.loadNpmTasks('grunt-contrib-concat'); // 默认被执行的任务列表。 grunt.registerTask('default', ['concat']); };
npm install grunt --save-dev
这条命令将安装Grunt最新版本到项目目录中,并将其添加到devDependencies内
grunt插件和其它node模块都可以按相同的方式安装。下面展示的实例就是安装 concat 任务模块
npm install grunt-contrib-concat --save-dev
(或者直接使用npm install 替代上面的两步,但是部分插件可能会无法安装)
5、在根目录小建立src和dist(根据grunt.js中的配置进行调整)文件。在src下建立想要连起来的js文件
6、运行grunt 。可以在dist目录下看到生成的文件
参考链接http://www.gruntjs.net/getting-started
相关推荐
grunt-启动-配置 快速启动的 Grunt 配置。
Sass 快速入门使用 grunt 或 gulp 快速启动 sass 到 css 编译。 以最少的 sass/grunt/gulp 配置开始您的项目、想法或概念证明。 ##先决条件安装 sass gem: gem install sass 对于 gulp,请确保已npm install --...
前言11第 1 章第 1 章Grunt 教程44快速入门 5配置任务 11创建任务 25创建插件 30使用命令行工具 32第 2 章第 2 章进阶知识进阶知识3
眼镜熊这是一个空的Grunt入门项目,预装了Babel,Sass,livereload等好东西。如果您已经有了Grunt,则几乎不需要任何设置。 这只是一个空的Web项目,随时可以使用。 仅开发(未压缩)文件夹的演示已实时发布: 仅...
FE项目模板项目模板,用于使用Grunt,SASS和JS快速设置项目。使用克隆存储库并安装依赖项: yarn install 然后,您可以运行grunt watch来编译您的scss。 已编译CSS会缩小,并存储在docs(public)文件夹中。 如此...
入门套件。 :warning: 自述文件仍在建设中。 快速开始 开发工具在 >= v0.10上运行 确保你有这些全局命令grunt & tsd : npm install grunt-cli -g npm install tsd@next -g 创建一个新项目并获取依赖项: git ...
入门套件,可让您快速安装并运行 如何使用 git clone https://github.com/davethegr8/grunt-surge-starter.git npm install 然后,更改your-project-domain.surge.sh在Gruntfile.js 。 如果您还没有喘振域,请将此...
入门使用以下命令在项目的旁边安装此grunt插件: npm install grunt-html --save-dev 然后将此行添加到项目的Gruntfile.js : grunt . loadNpmTasks ( 'grunt-html' ) ; 然后在配置中指定要验证的文件: grunt . ...
用于在多个Grunt项目上运行任务的Grunt任务,一旦失败,该项目将立即退出(快速失败) 入门 该插件需要Grunt。 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该...
咕噜声快速入门将npm更新到最新版本。 你可以得到 super meta 和npm install npm -g这个问题。 可能需要sudo 全局安装grunt-cli ,这样你就可以对那个傻瓜进行命令行了: sudo npm install -g grunt-cli 克隆 repo:...
Boostlee Boostlee是一个静态站点生成快速入门工具包。 使用Bootstrap-sass,Assemble,Gulp(和Grunt)。 开发此程序包的目的是使我可以更快地设置项目。 因此,对于缺少文档的情况,我深表歉意。 注意:此项目是...
Node、Grunt 和 Bower 驱动的快速启动样板,用于完全优化的静态前端构建。 用法 假设您已经安装了 Node、Grunt 和 Bower: 克隆项目,cd到目录 运行npm install 然后bower install 然后grunt init - 初始编译 ...
使用 Grunt、Stylus、Jeet、Bower 的 Kirby 的最小前端入门套件。 在没有臃肿前端框架的情况下快速启动开发。 构建时强调排版细节。 特征: 用于任务管理的 Grunt(例如 JS 文件的串联和丑化,将 Stylus 编译和缩小...
csjx西装CJSX开发的快速入门套件包括: 咕unt的任务运行者Webpack(带有开发服务器) React使用JSX语法的CoffeeScript编译器LESS编译器Nodemon服务器(也在CoffeeScript上) 快速开始: npm开始grunt-将启动带监视...
快速开始 在命令行中,运行: npm install grunt-assemble-download --save 接下来,要在您项目的Gruntfile中使用Assemble注册该插件,您可以指定该插件的直接路径(例如./path/to/plugins/*.js ),或者如果通过...
咕噜咕噜快速手表 类似于 ,但速度更快。 为什么是另一个手表? somtime 没有捕获 fs 事件(在 Windows 中)。 而且,它对我的目的来说太慢了。 我使用fast-watch重新启动服务器以重新加载开发中的源代码。 ...
Ember-Jumpstart 是的入门项目,它使用作为构建工具。 快速开始 确保安装了 克隆这个仓库 运行npm install以获取依赖项。 Bower 安装应该自动运行。 如果没有,则在之后运行bower install 。 运行grunt来编译应用...
入门这个插件需要 Grunt ~0.4.1 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-castle --save-dev ...
( )入门这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 使用此插件,您可以对位于某个目录内的所有静态 html 文件进行截图。 为您的站点创建一个...
掌握其快捷键设置等技巧,可快速提高开发调试效率。 精通阶段: 前端框架:学习前端框架,例如jQuery、Vue、React等。 前端框架:学习前端框架,例如Vue、React等。 网页性能优化:学习如何优化网页性能,例如减少...