由于最近的食美特项目需要对css文件和js文件进行压缩,各种比较之后,选择了grunt进行构建。google一下,几乎都是grunt0.3的使用说明,按照说明,几乎无法使用。查看gruntjs的入门 Getting started,又是云里雾里的,好吧,只能耐心看文档和不断的实践吧。
一、使用环境说明:
1、在window xp 下使用
2、命令行使用的git的客户端 msysgit 1.7.6(类似的nodejs应用,使用类linux的命令行比较好)
3、 只是入门说明,目的是快速的搭建环境,示例能够跑起来。详细的文档资料请参考gruntjs,
一、nodejs安装
进入 http://nodejs.org/ 直接点击 INSTALL,直接安装。(windows 下安装nodejs 会直接安装npm)
二、grunt 安装
由于0.4.1版本的grunt分为3部分:grunt,grunt-cli 和 grunt-init。
1、安装grunt-cli
如果 之前安装过grunt,需要先卸载 npm uninstall -g grunt
安装 grunt-cli : npm install -g grunt-cli
2、创建grunt项目
grunt项目一般需要以下内容:1 、grunt( 需要安装)2、grunt 插件 (需要安装) 3、package.json 和 Gruntfile.js 。 (官方入门Getting started 说通过 grunt-init 和 npm init 创建。对于入门来说,这两中方式都不太好用。推荐直接创建 package.json 和Gruntfile.js 文件)
1、在 c 盘 创建文件夹:testGrunt
2、创建2个文件package.json 和 Gruntfile.js
package.json 内容如下
{
"name": "smeitejs",
"version": "0.1.0",
"description": "js for smeite.com",
"homepage": "http://smeite.com/",
"author": "zuosanshao <zuosanshao@qq.com>",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.3.0",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-contrib-cssmin": "~0.5.0"
}
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
uglify: {
options: {
mangle: false
},
build: {
files: {
'assets/config.min.js': ['js/config.js'],
'assets/smeite.min.js': ['js/smeite.js'],
'assets/index.min.js': ['js/index.js']
}
}
},
cssmin: {
compress: {
files: {
'assets/all.min.css': ['css/base.css', 'css/global.css']
}
},
// smeite: {
// files: {
// 'assets/smeite.all.css': ['/play21/smeite.com/public/assets/css/**/*.css']
// }
// },
with_banner: {
options: {
banner: '/* My minified css file test test */'
},
files: {
'assets/min/base.css': ['css/base.css'],
'assets/min/global.css': ['css/global.css']
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
由于在食美特项目只需要压缩js和css文件。所有在Gruntfile.js 配置了2个grunt插件: grunt-contrib-uglify 和 grunt-contrib-cssmin
3 安装 grunt 插件。在git 客户端键入命令 cd /c/testGrunt ;
- 键入命令 npm install grunt-contrib-uglify 安装uglify
- 键入命令 npm install grunt-contrib-cssmin 安装cssmin
4、 准备相关资料
在 /c/testGrunt 目录下,创建 js目录,并在js目录下创建文件config.js smeite.js index.js ,创建css目录,并在css目录下创建base.css 和 global.css。 (这些文件都在Gruntfile.js 有配置,所以需要创建,内容可以随意的写)
5、执行grunt 命令
执行js压缩命令 grunt uglify 效果如下
![](http://static.oschina.net/uploads/img/201304/02142855_D2QX.png)
执行css压缩命令 grunt cssmin 效果如下
![](http://static.oschina.net/uploads/img/201304/02142855_ouwi.png)
整个文件截图
![](http://static.oschina.net/uploads/img/201304/02142855_3yzF.png)
后记:1、uglify 插件的使用说明 https://npmjs.org/package/grunt-contrib-uglify
2、cssmin插件使用说明 https://npmjs.org/package/grunt-contrib-cssmin
3、插件的配置需要在gruntfile.js中配置
相关推荐
**Grunt 前端构建工具** Grunt 是一个基于任务的JavaScript项目构建工具,它允许开发者通过编写配置文件来自动化一系列的前端开发任务。这个压缩包包含了在执行`npm install grunt --save-dev`命令后安装的所有...
自动化构建工具Grunt_入门介绍02.avi ├─03.自动化构建工具Grunt_合并js任务.avi ├─04.自动化构建工具Grunt_压缩js任务.avi ├─05.自动化构建工具Grunt_默认任务,任务高效说明.avi ├─06.自动化构建工具Grunt_...
总之,`Grunt`是项目构建的重要工具,它简化了前端开发过程中的许多重复工作,通过合理的配置和插件选择,可以有效地管理和优化项目资源,提高开发效率并保持代码质量。对于初学者,理解其基本原理和常用插件,能...
grunt-purifycss, 使用grunt构建工具删除未使用的CSS purifycss使用 PurifyCSS 清除不必要的CSS正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...
在JavaScript开发领域,自动化工具是不可或缺的一部分,而Grunt就是其中的一款强大且流行的构建工具。Grunt允许开发者通过配置文件定义一系列的任务,包括编译、测试、压缩、混淆等,从而实现项目构建过程的自动化。...
标题中的“打包构建工具gulp或grunt”指的是在前端开发中常用的自动化构建工具,它们能够帮助开发者简化项目构建过程,提高工作效率。这两个工具都是基于Node.js的,主要用于处理JavaScript项目,但也可以扩展到处理...
**Grunt前端开发工具部署** Grunt 是一个广泛使用的JavaScript任务运行器,它极大地提高了前端开发者的工作效率。Grunt 靠的是配置文件`Gruntfile.js`,在这个文件中,开发者可以定义一系列自动化任务,比如编译...
Grunt,作为JavaScript的构建工具,是前端开发中不可或缺的一部分。它通过自动化任务来简化重复性工作,如编译、压缩、测试等,从而提高开发效率。本Demo是基于《用grunt搭建自动化的web前端开发环境-完整教程》创建...
NuGet 包更新 (0.5) 即将推出ASP.NET vNext 支持是下一版本的目标入门你需要先安装 、 bower 、 grunt和yo 。 安装生成器: npm install -g generator-powermvc 在 MVC 项目目录中运行它: yo powermvc 运行grunt...
grunt是一款基于Node.js的构建工具,它允许开发者通过编写简单的JavaScript任务来自动化复杂的项目构建过程。它的核心理念是通过定义任务来自动化代码的预处理、合并、压缩、测试等流程,从而提高开发效率和代码质量...
JavaScript构建工具Grunt是开发者们在进行前端项目开发时常用的一款自动化工具,它极大地提高了工作效率,简化了诸如编译、测试、压缩、合并等常见任务的执行过程。Grunt是基于Node.js平台的,利用npm(Node包管理器...
简述关于Grunt依赖node的安装使用和功能
前端自动化构建工具grunt使用教程.zip 除了webpack,别忘了还有其它自动化构建工具
《全面解析:使用Grunt打包前端代码》 在前端开发领域,随着...通过正确配置和使用Grunt,开发者可以专注于编写高质量的代码,而无需担心构建流程。因此,学习并熟练掌握Grunt对于任何前端工程师来说都是必备技能。
此外,“源码”和“工具”这两个标签暗示了我们将探讨Grunt在处理原始代码和使用相关工具进行项目构建方面的应用。 【详细知识点】: 1. **Grunt简介**: Grunt是基于Node.js的自动化工具,可以执行预处理、测试...
grunt-drupal-tasks, 面向Drupal的Grunt构建和测试任务 Grunt Drupal任务用于自动化 Drupal 7和 Drupal 8构建和测试任务的...代码状态( 主分支): 特性这个项目构建在Grunt社区的工具之上,提供了许多 PHP &任务的脚本化
特征 更改时自动编译玉石,更少和咖啡文件 ... Livereload,文件更改时自动刷新浏览器 注释角度依赖性 使用$ templateCache将模板捆绑到js文件中 ... 运行grunt dist以生成dist/ dir,您可以将其简单地放入CDN中。
Grunt是第一个实现批量处理的JavaScript任务自动构建工具之一,但是他的构建速度的瓶颈和复杂的JSON配置导致了Gulp的快速发展。现在最糟糕的问题已经被解决了,Grunt仍然是一个很好的工具可供选择。