开发者社区> 秋天风景> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架

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

   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。

npm install grunt

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

npm install -g grunt

  

创建项目框架

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

  gruntfile,创建命令:

grunt init:gruntfile

  commonjs,创建命令:

grunt init:commonjs

  jquery,创建命令:

grunt init:jquery

  node,创建命令:

grunt init:node

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

  

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

grunt init:jquery --force

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

  

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

  

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

  

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

/*
 * GruntDemo
 * https://github.com/bluesky/grunt-demo
 *
 * 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 测试代码和页面:

/*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 实践:任务和指令》,敬请期待……

您可能感兴趣的相关文章

 

本文链接:JavaScript 项目构建工具 Grunt 实践:简介和安装

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《JavaScript开发框架权威指南》——2.6 创建Grunt插件
首先要做的事情之一是情创建一个公共的GitHub仓库,以存储你的新插件。下文中将要提及的示例包含在本书附带的源码中,本书附带了源码。一旦你准备好代码仓库,就把它克隆到你的电脑上。
1065 0
《JavaScript开发框架权威指南》——2.3 将Grunt添加到项目中
loadTask()方法一被调用,Grunt就会加载并执行在该文件夹下发现的所有Node模块,并且每次都将Grunt对象的引用作为参数传进去。这样的行为使我们可以将项目的Grunt配置划分为一系列相互独立的模块,每个模块负责一个单独的任务或插件的加载及配置工作。
961 0
《JavaScript开发框架权威指南》——2.2 Grunt是如何工作的
Grunt为开发者提供了一个工具包,用于创建命令行程序来执行项目构建过程中的重复性任务,如压缩JavaScript代码、编译Sass样式表等。不过,Grunt的能力并不限于创建简单的任务(通常这些任务不会被分享或者复用),以解决特定工程遇到的特定需求,其真正的力量源于其将任务打包为可复用的插件的能力。
1141 0
《JavaScript开发框架权威指南》——第2章 Grunt 2.1安装Grunt
懒惰的程序员讨厌重复自己。他们通常会花费大量的时间去创造有用的工具,代替自己完成重复性的工作。他们往往还会为这些工具编写详尽的文档,以免之后可能因此而遇到麻烦。
1139 0
JavaScript 项目构建工具 Grunt 实践:合并文件
   Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器。
628 0
JavaScript 项目构建工具 Grunt 实践:任务和指令
   Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及运行静态服务器。
699 0
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
0 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
0 0
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
0 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载