启动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是基于JavaScript的构建工具,它允许开发者定义一系列的任务来自动化常见的Web开发工作流程,如编译、压缩、测试、部署等。通过Grunt,我们可以大大提高工作效率,减少手动操作的时间和错误。 **项目配置与...
Grunt是一款基于JavaScript的任务运行器,它可以帮助开发者执行预处理、编译、压缩、测试等一系列构建任务。在这个场景中,`grunt-contact`可能是用于处理特定的文件合并或处理任务,但描述中并未详细说明其具体功能...
安装Grunt-CLI后,可以在项目的根目录下运行`grunt`命令,启动Grunt并执行预设的任务。 **基于Redhat 7.0_x64的环境** Grunt-CLI的这个版本是专门为Red Hat Enterprise Linux 7.0的64位版本设计的。Red Hat 7.0是...
在命令行中输入 `grunt` 命令即可启动 Grunt,执行默认的任务。如果在执行过程中遇到错误,可以参考错误信息来定位问题。常见的错误包括但不限于插件未安装、配置文件错误等。 - **插件未安装**:确保所有需要使用...
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是一个基于任务的JavaScript项目构建工具,而Testem则是一个实时的前端测试工具,支持多种浏览器,特别适合于TDD(测试驱动开发)和BDD(行为驱动开发)工作流。 Testem的核心功能在于它可以监听源代码的变化...
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项目中,`node_modules`会包含所有Grunt插件及其依赖,例如`grunt-elasticsearch-head`及其对Elasticsearch Head源码的引用。安装Grunt插件通常使用npm(Node.js包管理器)进行,命令如下: ```bash npm ...
`grunt-express`就是这样一款强大的工具,它利用`grunt.js`框架来启动并监控`express.js` Web服务器,使得开发者能够更加便捷地进行前端应用的构建和调试。`grunt-express`的主要优势在于它能够无缝集成`socket.io`...
- `grunt-contrib-connect`:本地服务器启动插件 - 可以逐个安装这些插件,如`npm install grunt-contrib-cssmin`;也可以一次性安装多个插件,如`npm install --save-dev grunt-contrib-concat grunt-contrib-...
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.js` 是一个广泛使用的任务运行器,它允许开发者定义一系列的任务,如编译 SCSS 到 CSS,压缩 JavaScript 文件,或者执行测试等。`grunt-cola` 就是为 `Grunt.js` 带来了更多的定制化功能,特别...
grunt-manifest, 生成HTML5缓存清单文件 grunt清单 生成HTML5缓存 ...正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你可以使用以下
在实际使用中,你需要解压这些文件,根据项目需求进行配置和调整,然后运行`grunt serve`启动构建服务。 总的来说,"grunt+jade"的组合为前端开发提供了高效的模板编译和自动化构建能力,简化了工作流程,提高了...