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

最新推荐文章于 2022-04-12 10:59:08 发布

dyl_love98

最新推荐文章于 2022-04-12 10:59:08 发布

阅读量335

点赞数

文章标签：项目工具

本文链接：https://blog.csdn.net/javablogs/article/details/8886402

版权

文章结束给大家来个程序员笑话：[M]

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));