启动grunt project:
1、已经存在的grunt project
假设grunt CLI已经安装了,项目里面已经有package.json和Gruntfile,启动很简单:
- 到项目的根目录
- 安装项目依赖:
npm install
- 启动grunt
grunt
2、一个新的grunt project
增加两个文件到你的项目里面:
- package.json
你会在这个文件里面列出项目需要的grunt和grunt plugins:
{ "name" : "***", "version" : "*.*.*", "devDependencies" : { "grunt" : "~0.4.0", "grunt-contrib-jshint" : "~0.1.1", "grunt-contrib-uglify" : "~0.1.2", "grunt-contrib-concat" : "~0.1.1" } }
package.json文件放在项目的根目录下,和Gruntfile同级
在根目录下执行:npm install,package.json里面定义的依赖版本会正确的加载!
在你的项目里面有几种方式去创建package.json
//大部分的grunt-init templates会自动的创建一个项目特有的package.json文件 //会创建一个基本的package.json文件 npm init 可以以下面例子开始,如果需要的话可以扩展 { "name" : "my-project-name", "version" : "0.1.0", "devDependencies" : { "grunt" : "~0.4.1", "grunt-contrib-jshint" : "~0.1.1", "grunt-contrib-nodeunit" : "~0.1.2" } }
- Gruntfile
这个文件命名成:Gruntfile.js 或者 Gruntfile.coffee
它是用来配置和定义任务的,同时加载grunt plugins
注释: 在0.3.x version的时候,它叫做:grunt.js
一个gruntfile由以下部分组成:
- "wrapper" function
module.exports = function(grunt){ //在这里面加入相关的任务代码 }
- 项目和任务配置
- 加载grunt plugins和任务
- 自定义任务
注:参数grunt
module.exports = function(grunt){ grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); //加载支持uglify任务的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); //默认的任务 grunt.registerTask('default',['uglify']); };
相关推荐
用Grunt搭建的一个简单的web前端自动化项目,支持js代码静态扫描、js/css文件合并、压缩、js文件监控等。
grunt-php, 启动一个PHP服务器 grunt-php 启动 php服务器几乎是取代了 grunt-contrib-connect的替代品。 例如开发PHP项目或者在它的上运行测试。使用 PHP 5.4.0 中内置的服务器。没有 middleware 选项作
grunt-wordpress, 用于将内容发布到WordPress的Grunt插件 grunt使用 WordPress 发布内容到WordPress的Grunt插件。...正在启动Grunt的wordpress就像任何其他的插件插件一样工作。 有关设置Grunt任务的详细信息,
grunt-ssh, SSH,Grunt的SFTP任务 新主人 启动 12 -23-2015,我正站在两个巨人( @chuckmo和 @andrewrjones) 作为这个项目维护者的肩膀上) 。 欢迎捐赠,如往常。 ( 这里消息也将在下一次发布时删除) 。静音 ssh
grunt-msbuild, 用于MSBuild和XBuild的Grunt插件 grunt-msbuild使用Grunt生成带有MSBuild和XBuild的项目正在启动这个插件需要 Grunt ~0.4.0 。 换句话说,它应该在 0.4.0或者更高版本上工作。If之前,请务必先查看...
grunt-purifycss, 使用grunt构建工具删除未使用的CSS purifycss使用 PurifyCSS 清除不必要的CSS正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...
grunt-bower-task, 面向 Bower的Grunt插件 grunt-bower-task 安装 Bower 软件包明智地安装。正在启动注意:如果你以前没有使用过 grunt,那么一定要检查一下 guide指南 guide 。 请注意,这里插件仅使用 grunt 的
grunt-build-control, 版本控制生成的代码 grunt-build-control 版本控制生成代码并部署它。正在启动这个插件需要 Grunt ~0.4.0 和 Git 。grunt-build-control还支持 AWS弹性 Beanstalk >= v3.5
grunt-contrib-pug, 编译Pug模板 grunt-contrib-pug-v1.0.0 编译Pug模板正在启动If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你可以使用以下命令安装这里插件:npm
grunt-contrib-copy, 复制文件和文件夹 grunt-contrib-copy-v1.0.0 复制文件和文件夹正在启动If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你可以使用以下命令安装...
grunt-manifest, 生成HTML5缓存清单文件 grunt清单 生成HTML5缓存 ...正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你可以使用以下
grunt-jsbeautifier, 使用Grunt和https美化 js css html和json文件 jsbeautifier jsbeautifier.org 用于 grunt正在启动这个插件推荐使用 Grunt ~0.4.1 。 Grunt ~0.3.0 只有 suported,直到 0.1.4版本。If之前,请务
从 Grunt 启动 ADB 命令 入门 这个插件需要 ~0.4.0和adb命令。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm ...
启动和停止数据库服务 入门 这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-...
注意: grunt命令的工作是加载并运行您在项目中本地安装的Grunt版本,而不考虑其版本。 从Grunt v0.4开始,永远不要在全球范围内安装Grunt本身。 有关原因的更多信息,。 有关更多信息,请参见《 。 Shell选项卡...
在项目目录下执行 grunt-init lego (注意:项目目录要为空文件夹,不然会报错) 根据提示填写相关的内容 执行 npm install 命令下载安装相关依赖 快速在当前文件夹打开命令行 win7:首先按住Shift键,然后选择某...
grunt-responsive-images, 针对响应式网站的不同大小,生成图像 grunt-responsive-images 生成不同大小的图像正在启动这个插件需要 Grunt ~0.4.5 。If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用...
使用 grunt 构建 node.js 项目的 grunt 文件模板。 当前此模板包括以下任务: 删除输出文件夹中的文件。 编译咖啡脚本。 将其他项目文件复制到输出文件夹。 进行文本替换。 启动程序。 如何使用 安装 grunt-...
grunt-phantomas, Grunt插件封装phantomas以测量前端性能 phantomas 面向phantomas的Grunt插件 正在启动这个插件需要 Grunt ~0.4.1If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...
Sass 快速入门使用 grunt 或 gulp 快速启动 sass 到 css 编译。 以最少的 sass/grunt/gulp 配置开始您的项目、想法或概念证明。 ##先决条件安装 sass gem: gem install sass 对于 gulp,请确保已npm install --...