1.第一步当然是先安装好nodejs里面的npm包管理器咯,若还不知道怎么安装请参考nodejs那些事里面的安装步骤 2.node安装完后,就安装grunt-CLI,如果nodejs直接安装在系统默认的路径,也就是c盘下的program files/nodejs/下的话,那么直接调出dos客户端cmd 直接在默认盘符路径下输入:npm install -g grunt-cli   回车 出现以下画面: 3.这时候要验证一下grunt-cli是否安装完成并生效,你只需要继续在命令行中输入“grun…

Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后端代码 完全分离,才会使用Grunt构建工具. 目前很多构建工具已经相当强大了,说说他的强大功能: 1.javascript文件压缩.合并,合并能减少很多HTTP请求,优化网站性能: 2.自动做CSS Sprite,小图标合并的繁琐工作,你完全可以解脱,你告诉他你的图标的图标位置,对应的图标合并.b…

前言 以现在前端js激增的态势,一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说,文件上百简直是家常便饭,那么这个时候我们的js文件应该怎么处理呢?另外,对于css文件,又该如何处理呢??这些都是我们实际工作中要遇到的问题,比如我们现在框架使用zepto.backbone.underscore我们要如何将他们合成一个libs文件,这都是令人头疼的问题 但是grunt的出现却让这些事情变得优雅起来!简单一键,打包结束,尼玛不是不可能啊! grunt 是一套前端自动化工具,一个基于nod…

1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.2013年02月18日,Grunt v0.4.0 发布.F…

使用grunt 之前,需要做一些基本工作. 1.在E盘 新建空文件夹 grunt. 2.在grunt目录下新建package.json 文件,用了存储 npm模块的依赖项.基本依赖块代码如下: { "name": "demo", "file": "zepto", "version": "0.1.0", "description": "demo",…

grunt vs gulp 虽然gulp已经出来很久了,但是一直没有去使用过.得益于最近项目需要,就尝试了一下,以下从几个要点讲一下grunt和gulp使用的区别,侧重讲一下在使用gulp过程中发现的问题.而两种工具孰优孰劣由读者自己判断. 1. 书写方式 grunt 运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等.而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候要搞懂各种插件的配置规则.gulp 是用代码方式来写打包脚…

Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情.比如说要对处理后的文件进行更名操作,你可能使用的是 …

几天以前,我决定开始启用一个CSS预处理器,找了很久,我选择了SASS并且尝试着去安装它.但是这似乎不是一件简单的事,在安装过程中出现了许多让我始料不及的问题,我很沮丧,但查找了很多资料,我终于找到了一个正确的安装它的方法. 因此在本文中,我将向你展示两件事: 怎样去安装Ruby,SASS和Compass样式框架 怎样去处理一些可能在安装过程中出现的常见问题 你可能已经去过<SASS的FAQ>页面,不过一般基本上都是说“当你需要安装并运行SASS时,请下载Ruby”. 在我看来,对于很多人来说…

原文转自:http://blog.jobbole.com/51586/ 这篇文章将带领你用Grunt来提速和优化网站开发的流程.首先我们会简短介绍Grunt的功能,然后我们直接上手,介绍如何用Grunt的不同插件来替你完成网站项目开发中的很多繁冗工作. 接着我们会创建一个简单的input校验器,用 Sass 来完成CSS的预处理,我们会学习如何用grunt-cssc 和CssMin来合并和压缩CSS,如何用 HTMLHint 来保证我们的HTML正确无误,以及如何实现在运行时部署和压缩我们的文件…

Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.201…