grunt是什么?

grunt是一个前端构建工具, 每种应用开发, 都有一套构建工具, 例如linux c程序开发, 构建工具是make, java程序的构建工具为maven,web前端经过十多年的发展也形成了自己的构建工具, 此包括grunt, 其他还有GALP, 相比grunt较成熟, galp目前风头较劲 http://www.benben.cc/blog/?p=407

grunt基础认识

参见, 基本上按照下文运行一遍, 就理解grunt架构了。

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

http://www.cnblogs.com/wangfupeng1988/p/4561993.html

----官网的get start http://www.gruntjs.net/getting-started

从中我们看到grunt可以帮我们节省开发过程中的重复动作,避免写错代码,例如:

1、使用jshint插件 - 可以检验js语法的合法性, 一些好的js编码习惯都会体现, 如果不通过则需要更改代码

2、使用concat插件 - 将多个js文件合并。 这样应用网页只需要引用一个文件, 同时保证开发文件上的模块化。

3、使用uglify插件 - 可以讲js文件内容压缩, 压缩后代码只有一行, 且文件不可读, 文件大小降低很大。

其他还有海量功能,只要前端涉及的, 都可以在grunt的插件库上找到:

http://www.gruntjs.net/plugins

grunt模板使用

grunt工具,从上一节上看到,需要配置gruntfile文件, package.json文件, 比较繁琐, 不了解配置项还是比较难配置的。 因此问题引发, grunt-init工具, 此工具线上提供若干项目模板, 只需要将模板下载到C:\Users\xxx\.grunt-init, 然后执行在项目目录下执行 grunt-init xxx, 就可以自动生成配置文件和基本的文件模板。

即:项目脚手架 -- 安装模板一节

http://www.gruntjs.net/project-scaffolding

例如

jquery插件模板 : https://github.com/gruntjs/grunt-init-jquery

gruntfile基本模板 : https://github.com/gruntjs/grunt-init-gruntfile

下图为 下载了gruntfile基本模板后, 安装模板命令执行结果:

安装好模板后, 执行grunt,将会提示你需要安装的 grunt插件

安装grunt 和 插件

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev

jshint工具

jshint为js语法检查工具: 在gruntfile中可以配置检查的选项:

选项的具体意思见 http://jshint.com/docs/options/

jshint: {
  options: {
    curly: true,
    eqeqeq: true,
    immed: true,
    latedef: true,
    laxbreak: true,
    newcap: false, //函数名首字母大写表示类的构造函数
    noarg: true,
    sub: true,
    undef: true,
    unused: false,
    boss: true,
    eqnull: true,
    browser: true,
    globals: {
      jQuery: true,
      console: true,
      $: true,
      Class: true
    }
  },
  gruntfile: {
    src: 'Gruntfile.js'
  },

应用

经过grunt改造并实现的 js插件例子:

https://github.com/fanqingsong/Second2DHMS

grunt搭建前端自动化实践的更多相关文章

  1. grunt构建前端自动化的开发环境

    废话不多说.直奔主题. 1.安装node. 别问为什么.如果你不知道,说了你还是不知道. 别问怎么安装,自己去百度. 2.安装grunt_CLI. 安装完node,并且安装成功了,后.下载grunt_ ...

  2. Grunt usemin前端自动化打包流程

    前端优化是尽量减少http请求,所以我们需要尽量合并压缩文件,然后调用压缩后的文件,比如多个css文件压缩成一个,多个js文件合并压缩等,usemin能够自动在html中使用压缩后的文件,达到上面的目 ...

  3. grunt构建前端自动化

    一.grunt是基于nodejs的,所以首先我们需要安装node 二.全局安装grunt 可以参考 http://www.gruntjs.net/docs/getting-started/ 进行安装. ...

  4. Grunt打造前端自动化工作流

    HTML去掉注析.换行符 - HtmlMin CSS文件压缩合并 – CssMinify JS代码风格检查 – JsHint JS代码压缩 – Uglyfy image压缩 - imagemin ht ...

  5. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  6. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  7. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  8. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  9. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

随机推荐

  1. Nginx 笔记与总结(4)配置 server 访问日志

    打开 nginx.conf: [root@localhost ~]# cd /usr/local/nginx/conf [root@localhost conf]# vim nginx.conf 在默 ...

  2. JS采用正则表达式简单获取URL地址栏参数

    GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=( ...

  3. 奥迪--Q3

    -型号:Q3 -价格:23-35W -动力:1.4T/2.0T -变速箱:6挡双离合/7挡双离合 -长宽高:4.40,1.84,1.59 -油箱:64L -发动机:EA888 -大灯:氙气(选装LED ...

  4. 10.PHP内核探索:Apache运行与钩子函数

    Apache是目前世界上使用最为广泛的一种Web Server,它以跨平台.高效和稳定而闻名.按照去年官方统计的数据,Apache服务器的装机量占该市场60%以上的份额.尤其是在 X(Unix/Lin ...

  5. 大话数据结构(十)java程序——队列

    1.队列的定义 队列(queue):是只允许在一端进行插入操作,而在另一端进行删除操作的线性表. 队列是一种先进先出的线性表,简称FIFO(First out firts in).允许插入的一头是队尾 ...

  6. Programs vs. processes

    Computer Systems A Programmer's Perspective Second Edition This is a good place to pause and make su ...

  7. JAVA基础讲义

    一.安装JDK 第一步:双击JDK的exe文件. JDK(Java开发包),JRE(Java运行环境) 第二步:配置 path:jdk的根目录,jdk下的bin目录(两个目录之间记得用分号隔开) cl ...

  8. Delphi的哈希表(一)

    哈希表是通过哈希值来访问的,通过一定的内存浪费获取检索速度,在检索项时是不需要逐一检索.在编程中有一定的好处. unit Unit1; interface uses Windows, Messages ...

  9. http相关概念在iOS中的使用介绍

    http://www.cocoachina.com/ios/20160329/15773.html

  10. Qt调用Server SQL中的存储过程

    Server SQL中的存储过程如下: CREATE procedure PINSERTPC @pcnum int, @pcname varchar(50), @pctype int, @ipaddr ...