基本工作流:

JS合并、JS压缩、CSS压缩、CSS Sprite、图片优化、测试、静态资源缓存(版本更新)...

基于工作流产生的工具:

JSHint(jshint.com)、CSSLint(csslint.net)、jade(jade.tilab.com)、coffeeScript(coffee-script.org/)、requireJs/seaJs、compass/less/sass ...

Grunt就是解决各种工具组合而形成系统工作流的解决方案

安装

nodeJs --> npm --> grunt --> package.json --> 安装插件Grunt相关插件 --> Gruntfile.js

nodeJs : 可使用homeBrew安装,也可以官网安装 brew install node(附带npm)

grunt : npm install -g grunt-cli(卸载:npm uninstall grunt)

package.json : 用于nodeJs包管理(比如grunt插件安装管理) npm init 开始填写项目名称、版本号、git信息、作者等信息

安装grunt相关插件 : 合并文件(grunt-contrib-contact)、语法检查(grunt-contrib-jshint)、Sass编译(grunt-contrib-sass)、压缩js文件(grunt-contrib-uglify)、监听文件变化(grunt-contrib-watch)、建立本地服务器(grunt-contrib-connect)

安装grunt到项目命令 : npm install grunt --save-dev(npm install grunt表示安装到当前项目,--save-dev表示安装grunt信息添加至package.json中,在package.json显示为"devDenpendencies" : {"grunt" : "^1.0.0"}表示当前项目依赖grunt,版本为1.0.0)

安装grunt相关插件到项目命令 : npm install --save-dev grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect表示把相关插件到项目中,一个插件对应一个任务

配置

Gruntfile.js : 配置Gruntfile.js,写入任务

任务:Mulit Tasks( grunt.initConfig({key : value})  ) 和 Baisc Tasks

配置Gruntfile.js语法 : 所有的代码包裹在 module.exports = function (grunt) { ... };里面的代码主要分为:任务配置(也可不必要,比如Baisc Tasks)、插件加载、任务注册。实现:用grunt注册一个任务从而更具根据任务配置调用加载的插件来执行相应的操作

Mulit Tasks : 有所谓的target 且每个Mulit Task都必须有一个task 如 : grunt.initConfig({concat : {foo : { ... }, bar : { ... }}, uglify : {bar : {}}})  concat任务有foo和bar两个target,而uglify只有一个target,target名字可以更换(但是任务的名称是固定的,比如concat对应相关的插件),现在运行grunt concat:foo或grunt concat:bar分别表示运行foo或bar指定的的concat任务 只运行grunt concat将会遍历concat的targets按顺序运行

Baisc Tasks : 直接注册任务 grunt.register(taskName,taskFunction) 如 : grunt.register("foo", function (arg1, arg2) { ... }) 运行grunt foo 或者 grunt foo:a:b a和b是传递给foo的参数

任务配置 : 调用插件配置要执行的任务和实现的功能

Baisc Tasks : 不需要任务配置

插件加载 : 加载所需的插件 grunt.loadNpmTasks()

任务注册 : 注册一个任务,包含之前的任务配置代码 grunt.registerTasks()

Grunt 认识的更多相关文章

  1. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  2. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  3. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  4. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  7. Grunt基本使用-V1.0

    浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...

  8. nodejs、npm、grunt——名词解释

    最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  10. Grunt学习使用

    原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...

随机推荐

  1. Unity3d截图保存到Android相册的实现

    Unity3d截图保存到Android相册的实现-----------------------------ultrasoon 季风原创--------------------------------- ...

  2. epoll的使用

      http://blog.csdn.net/ljx0305/article/details/4065058 epoll - I/O event notification facility 在linu ...

  3. git无法连接bitbucket/github时,出现"Permission deied(publickey)"

    Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you ha ...

  4. Spring SqlRowSet example--转载

    原文地址:http://www.roseindia.net/tutorial/spring/spring3/jdbc/sqlrowset.html The 'SqlRowSet' is used to ...

  5. 关于android listview去掉分割线

    1.设置android:divider="@null" 2.android:divider="#00000000" #00000000后面两个零表示透明 3.. ...

  6. LeetCode13 Roman to Integer

    题意: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...

  7. SQL Server 的事务和锁(二)-Range S-S锁

    在这篇随笔中,我们的主要关注点在 Key-Range Lock.Key-Range Lock有 S-S.S-U.I-N.X-X几种情况.我们一个一个来说,力求明白.遗憾的是,这里可能会比较冗长,那么死 ...

  8. AsyncTask的介绍

    android AsyncTask介绍 AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接 ...

  9. XACML-<Target> 元素的结构与相关的评估

    本文由@呆代待殆原创,转载请注明出处. 一.<Target>元素的结构 <Target>元素标识的父元素被用于评估决定请求.<Target>元素即可以做为<P ...

  10. [JavaEE] applicationContext.xml配置文件使用合集

    配置实例 – 1 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...