Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器。

  

安装 Grunt

  推荐 Windows 用户使用 Git Shell 来进行命令行操作。安装 Windows 桌面版 GitHub 的时候会自动安装 Git Shell。

  GitHub for Windows 下载地址:http://windows.github.com

  Grunt 运行于 Node.js 环境,这里假设你已经安装了 Node.js 和 NPM。

1
npm install grunt

  为了便于操作,可以使用参数 -g 配置为全局安装:

1
npm install -g grunt

  

创建项目框架

  安装好 Grunt 后就可以开始创建项目了,Grunt 内置下面四种基本的项目模板:

  gruntfile,创建命令:

1
grunt init:gruntfile

  commonjs,创建命令:

1
grunt init:commonjs

  jquery,创建命令:

1
grunt init:jquery

  node,创建命令:

1
grunt init:node

  我们今天创建的是 jQuery 项目,编写一个 jQuery 插件示例。现在 GitHub 创建好示例仓库 GruntDemo,然后使用桌面版工具克隆到本地,在 Git Shell 中进入仓库目录,再输入 grunt init:jquery 命令进行创建,如果当前位置已存在项目,可能会有如下提示:

  

  如果需要覆盖,这个时候需要使用 --forece 参数:

1
grunt init:jquery --force

  创建项目时,需要填写一些项目的基本信息,例如项目名称、描述、仓库地址、作者信息(后面几项有默认内容)等,如图示:

  

  OK,到这里项目就创建成功了!下面是项目的目录结构:

  

  并且 README.md 文件的内容和格式也生成好了:

  

  然后就可以编写插件代码了。Grunt 提供的 jQuery 插件代码框架如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
 * GruntDemo
 *
 * Copyright (c) 2013 BlueSky
 * Licensed under the MIT license.
 */
 
(function($) {
 
  // Collection method.
  $.fn.awesome = function() {
    return this.each(function() {
      $(this).html('awesome');
    });
  };
 
  // Static method.
  $.awesome = function() {
    return 'awesome';
  };
 
  // Custom selector.
  $.expr[':'].awesome = function(elem) {
    return elem.textContent.indexOf('awesome') >= 0;
  };
 
}(jQuery));

  同时还生成了相应的 Qunit 测试代码和页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
(function($) {
 
  module('jQuery#awesome', {
    setup: function() {
      this.elems = $('#qunit-fixture').children();
    }
  });
 
  test('is chainable', 1, function() {
    // Not a bad test to run on collection methods.
    strictEqual(this.elems.awesome(), this.elems, 'should be chaninable');
  });
 
  test('is awesome', 1, function() {
    strictEqual(this.elems.awesome().text(), 'awesomeawesomeawesome''should be thoroughly awesome');
  });
 
  module('jQuery.awesome');
 
  test('is awesome', 1, function() {
    strictEqual($.awesome(), 'awesome''should be thoroughly awesome');
  });
 
  module(':awesome selector', {
    setup: function() {
      this.elems = $('#qunit-fixture').children();
    }
  });
 
  test('is awesome', 1, function() {
    // Use deepEqual & .get() when comparing jQuery objects.
    deepEqual(this.elems.filter(':awesome').get(), this.elems.last().get(), 'knows awesome when it sees it');
  });
 
}(jQuery));

  

JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架的更多相关文章

  1. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  2. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  3. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  4. grunt项目构建工具

    JS项目构建工具Grunt实践 一:下面来介绍下如何用grunt合并,压缩js文件.    大概步骤有如下:     1. 新建文件夹相对应的项目 比如文件名叫:gruntJs      2. 新建文 ...

  5. Java项目工程化之项目构建工具Maven

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  6. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  7. 项目构建工具maven的使用方法

    最近在开发javaweb项目中有用到maven,以前并不是很了解,于是学习了一些相关内容,记之共享. 本篇内容在Windows环境下实施,JDK版本使用的1.7.0_79. 一.maven是什么? 简 ...

  8. 【项目构建工具】 Gradle笔记1

    一.Gradle简介 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XM ...

  9. 取代 Maven?这款项目构建工具性能提升 300%

    在 GitHub 上闲逛的时候,发现了一个新的项目:maven-mvnd,持续霸占 GitHub trending 榜单好几天了. maven-mvnd,可以读作 Maven Daemon,译作 Ma ...

随机推荐

  1. JAVA 内存泄露的理解

    1 什么是内存泄露? 内存泄露是指没用的对象持续占有内存空间,造成内存空间浪费.所以说JAVA是有内存泄露的. 2 内存泄露的原因是什么? 较长生命周期对象持有短生命周期对象的引用,导致短生命周期对象 ...

  2. Secant Method (Website)

    Secant Method:  https://www.youtube.com/watch?v=qC9xnsfOd30 Secant Method : http://mathworld.wolfram ...

  3. ZEDBOARD启动自启配置(加载镜像) 分类: OpenCV ubuntu shell ZedBoard Eye_Detection 2014-11-08 18:53 167人阅读 评论(0) 收藏

    参考:陆书14.2.8 1)备份ramdisk8M.image.gz 2)加载rootfs镜像文件: 3)在镜像目录下建立自己所需文件夹(挂载目录): 我需要的挂载目录有两个: root/qt/ins ...

  4. gitlab hooks

    之前一直用文件同步工具进行两台服务器之间的同步 最初的目的是吧gitlab的代码库同步到开发环境中运行 实时的 ,后来由于gitlab的代码仓库的代码不是实时的 于是在即使同步不适合 我的需求. 后来 ...

  5. 【Spring五】AOP之使用注解配置

    AOP使用注解配置流程: 1.当spring容器启动时候.    < context:component- scan base-package= "cn.itheima03.sprin ...

  6. Linux chmod

    在Linux中要修改一个文件夹或文件的权限我们需要用到linux chmod命令来做. 语法如下: chmod [who] [+ | - | =] [mode] 文件名 命令中各选项的含义为 u 表示 ...

  7. Java_Activiti5_菜鸟也来学Activiti5工作流_之初识常用服务类和数据表(二)

    /** * 代码清单中使用 ProcessEngines类加载默认的流程配置文件(activiti.cfg.xml),再获取各个服务组件的实例. * RepositoryService主要用于管理流程 ...

  8. win2008 64位下.net 无法访问oracle

    这两天换了台新机子,就想弄个新系统win2008 64bit来测试下,也尝尝新鲜,结果是碰的头破血流啊,哈哈就像挖宝似的 环境:win2008 64bit + IIS7+.net2.0 +ORACLE ...

  9. django连接已有的数据库

    以连接postgresql为例: 1.安装psycopg2,下载地址:http://www.stickpeople.com/projects/python/win-psycopg/ 2.配置setti ...

  10. JSP技术

    1. JSP技术简介 JSP全称是Java Server Pages,它和servlet技术一样,都是SUN公司定义的一种用于开发动态web资源的技术.是sun公司定义的一种规范,JSP实际上就是Se ...