转自:http://user.qzone.qq.com/174629171/blog/1404433906 Grunt被定义为:the javascript task runner. 什么算是Javascript task呢?日常开发中,我们经常对js文件进行校验(jshint).压缩.合并等,这些就算是task. Grunt可以把这些经常操作的task的个性化的配置持久化,批量执行,一键搞定. Grunt这个工具听起来挺高大上的,也确实高大上,因为他为我们做了很多脏活.累活(重复性的工作),b…

Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应的html页面模板.css样式表.Javascript文件,以及相关的依赖文件,图片等. 具体的目录结构如下图所示: 往往在代码上传和项目发布之前需要将模块内各个文件比如JavaScript文件.CSS样式表,图片等进行压缩合并,目的主要在于减少加载文件的大小,加快文件加载速度,同时也能在一定程度上…

之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 Ant 的 XML 写起来更简洁更顺手: 任务模块资源丰富,如代码合并.压缩.检测.JSDoc.单元测试等你能想到的都可以找到: 文档丰富,从入门使用,到高级定制,都有相应的使用说明: 上手容易,Grunt 以及 Grunt 的任务模块都是通过 npm 进行安装和管理,配置简单. 一.安装 Grunt…

Grunt 新手一日入门 2014.06.20 前端相关 TOC 1. 用途和使用场景 2. 开发一个任务自动处理器 3. 开始学习 Grunt 3.1. 安装 Grunt 3.2. 生成 package.json 文件 3.3. 安装 Grunt 和所需要的插件 3.4. 配置 Gruntfile.js 的语法 3.4.1. 任务配置代码 3.4.2. 插件加载代码 3.4.3. 任务注册代码 3.5. 配置 Gruntfile.js 3.6. 项目文件传输与协作 4. 总结与扩展阅读 当时学…

前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的,一个全副武装的前端可能会是这样的: JSHint CSSLint Jade CoffeeScript RequireJS/SeaJS Compass/Stylus/Le…

引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在Nodejs中,安装grunt的命令行接口. npm install -g grunt-cli 将grunt命令植入系统路径.通过nodejs的require查找到安装的grunt,就能在任意目录下运行grunt项目了. 在一个简单的实例中,慢慢享受grunt给前端所带来的便捷与随心所欲. 新建项目的…

watch几乎是grunt必不可少的应用,一旦配置好watch,保存文件后将立即执行命令 安装方式如下: npm install grunt-contrib-watch --save-dev 安装好以后就可以在gruntfile里写配置了: watch: { lesss: { files: ['css/test.less'], tasks: ['less'] } ,sasss: { files: ['css/testSass.scss'], tasks: ['sass'] } } 配置好以后,在…

0.简介 grunt是一个任务自动运行器.简单来讲,用了以后,再也不用每次修改sass后,去生成下css,也再也不用去一遍遍压缩js了 ,也再也不用修改了点点东西就要去刷新页面,也不需要去复杂地建立一个本地服务了,你只要在Gruntfile.js里面写好任务,这一切grunt都帮你解决了.(grunt的主要功能在3里面有写) 1.安装(首先确保你安装了nodejs) sudo npm install -g grunt-cli 2.进入到你得操作文件夹(比如 /grunt/demo),然后执行 n…

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node.js 被认为是不稳定的开发版.之前,在用grunt来合并文件时,老是报错,原因是node.js的版本太低了. 在安装grunt之前,你需要先将Grunt命令行(CLI)安装到全局环境中. npm install -g grunt-cli 上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就…

grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给出的配置选项. 注意:这个独立的程序曾经是作为Grunt内置的"init"任务而存在的. 安装 为了使用grunt-init,需要将其安装到全局环境中. npm install -g grunt-init这样就会把grunt-init命令安装到你的系统路径中,从而允许你在任何目录中都可以运…

Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS文件压缩合并 – CssMinify JS代码风格检查 – JsHint JS代码压缩 – Uglyfy image压缩 - imagemin 重复而枯燥的工作太多了,我们需要一个自动化的工作流程,让我们更专注于coding,而不是coding外的繁琐工作.于是Grunt应运而生.可以想像,如果在n…

创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin 命令安装grunt插件模版.(3)在一个空的目录中执行 grunt-init gruntplugin .(4)执行 npm install 命令以准备开发环境.(5)为你的插…

每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务,那么该任务将会默认被执行. 任务别名 如果指定了一个任务列表taskList,新任务名taskName将是这一个或多个指定任务的别名.当运行此 "任务别名" 时,在taskList 中指定的每个任务都会按照其出现的顺序依次执行.taskList参数必须是一个任务数组.grunt.regis…

这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify      grunt-contrib-qunitgrunt-contrib-concatgrunt-contrib-jshintgrunt-contrib-watch 上面的uglify,concat,watch这三个插件用的最多,第一个插件是用来压缩文件的,第二个插件是用来合并文件的,第三个插件用来监听文件内容的,如果文件内容改变了,就会触发回调方法进行相应的处理. 我们一步一步来讲解这个 …

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相冲突,就将被忽略. 举个例子: grunt.initConfig({ concat: { // 这里是concat任务的配置信息. }, uglify: { // 这里是uglify任务的配置信息 }, // 任意数据. my_property: 'whatever', my_src_files:…

经过前面的学习,将测试的Gruntfile整合在一起! /** * Created by Administrator on 2017/6/22. */ module.exports = function(grunt){ "use strict"; grunt.initConfig({ pkg: grunt.file.readJSON("package.json"), //将存储在package.json文件中的grunt 版本信息和各个插件的数据信息引入到grunt…

Gruntfile由以下几部分构成: "wrapper" 函数 项目与任务,目标配置 加载grunt插件和任务 自定义任务 1.wrapper函数(包装函数) 每一个 Gruntfile (和grunt插件)都遵循同样的格式,编写的Grunt代码都必须放在此包装函数内:相当于是gruntfile的入口: module.exports = function(grunt) { // Do grunt-related things in here }; 2.项目和任务,目标配置 大部分的Gr…

1.什么是grunt grunt的官方解释是:javascript世界的构建工具. 为何要构建工具? 一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.当你在Gruntfile文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作. 2.如何开始grunt? 1.准备node环境 安装node(参考官方) 2.安装grunt : 我们需要安装CLI官方推荐在全局安装CLI(…

grunt-contrib-uglify uglify是一个文件压缩插件,项目地址:https://github.com/gruntjs/grunt-contrib-uglify 本文将以一个DEMO来展示如何使用uglify插件. DEMO环境 package.json: { "name": "grunt-demo", "version": "0.1.0", "devDependencies": { &q…

今天看到一篇通俗易懂的Grunt入门文章,博主写得很用心,原文请戳:http://yujiangshui.com/grunt-basic-tutorial/ 当时学习 Grunt 的时候,真是很头疼.分了两个时间段,学习了两次才硬啃下来,之后才能用在项目中.主要原因我认为是学习资料和文档上面写的太高端了.这类的文档或者资料有个显著特点,上来先简单介绍一下这个玩意(Grunt 是一个 JavaScript 任务运行器),然后就是如何安装,直接给你配置文件的语法,如何使用插件,新手往往看完还不知所以…

也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没死,gulp也不是多新颖的东西). 看标题很明显知道相比Grunt,我会更为推崇gulp,不是说Grunt不好,而是gulp效率更高.健壮性更好,配置也更为简单,自然也值得我们为它任性一回. 先谈谈上述提到的gulp的优越性: 一. 性能更高 相对Grunt频繁的IO操作读写,gulp是将项目任务流…

1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.安装nodejs非常简单,完全傻瓜式.下一步下一步下一步.的安装方式,这里不再赘述.去 https://nodejs.org/ 上,点击页面中那个绿色.大大的“install”按钮即可.我这儿在百度云盘存放一个,需要的点击下载 安装了nodejs之后,可以在你的控制台中输入“node -…

想了解Grunt,可以先去官网 看看. 第一次接触Grunt是通过Coding的移动端项目, 刚开始因为环境的问题折腾了一两天,然后就顿悟了. Grunt构建工具对于前端开发而言,简直是神器(ps.虽然我不是专职前端2333)... 高手们 觉得描述有误欢迎指教. 这里只是对我的使用过程做一些简单的记录和描述,说了这么多,我们开始吧. Grunt入门 请先阅读Grunt快速入门! Grunt 作为工具,目的是为了提升开发效率,让繁琐的工作自动化.Grunt 之所以优秀,离不开庞大的插件库.而我们…

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表 示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的 东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是…

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是可以…

1. 前言    替代grunt的其他工具,例如gulp.Gulp未来有可能替代grunt,现在市场占有率不如grunt. 本文讲解grunt入门,以及讲解grunt最常用的几个插件的使用.我录制的视频教程<用grunt搭建自动化的web前端开发环境>(教程中有源码下载). 2. 安装nodejs Grunt和所有grunt插件都是基于nodejs来运行的. 安装了nodejs之后,可以在你的控制台中输入“node -v”来查看nodejs的版本,也顺便试验nodejs是否安装成功. 注意两点…

原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用gr…

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

原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一…

用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你…