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

　 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

 * 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 测试代码和页面：


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

　　

时间： 2025-01-02 18:29:16

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

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

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部

自构建工具TeamCity的安装及使用

自构建工具TeamCity的安装及使用 第2章 安装步骤 2.2 软件安装 2.2.1 安装包位置 \\192.168.0.5\persons\下载软件\TeamCity-8.1.5.exe 附属安装包 \\192.168.0.5\persons\下载软件\WDeploy.exe 2.2.2 安装 点击 Teamcity-8.1.5.exe 按提示安装即可,安装完成后在安装目录有个文件加 TeamCity 同时管理用的网站也配置好了 在浏览器输入配置的地址打开如下:http://localhos

Maven：项目构建工具

项目构建工具 —— Maven Maven简介 Maven官网: http://maven.apache.org/ 百度百科:关键词: 项目对象模型(Project Object Model),项目管理工具,合理叙述项目间的依赖关系 作用 1)      管理jar 2)      将项目拆分若干个模块,多个模块组合成大项目 3)      热部署,热编译 仓库概念 依赖特性 Maven安装与配置 Maven下载地址:http://maven.apache.org/download.cgi 步骤

java，maven项目构建工具学习

maven是一个项目构建工具,maven可以完成项目打包,在线管理依赖包等. maven介绍参考:https://www.runoob.com/maven/maven-tutorial.html maven安装参考:https://blog.csdn.net/qq_42881421/article/details/82900849 maven修改镜像源参考:https://www.runoob.com/maven/maven-repositories.html maven修改默认仓库地址参考:h

Cocos2d-x 3.1.1 安装和创建项目---（入门必看）

1.安装python2.7.8,安装cocos2dx 3.1.1,并将python2.7.8安装路径加入系统环境变量中; 2.python2.7.8很简单,基本就是默认就可以了. 3.cocos2dx 3.1.1下载完之后,就解压.然后F:\cocos2d-x-3.1.1\build(我的解压之后是放在f盘的),然后在build这里可以找到cocos2d-win32.vc2012.sln,用vs2012打开它,然后生成解决方案(生成的这个过程比较慢,大概10分钟吧),然后在F:\cocos2d-

Django在Win7下安装与创建项目hello word示例

Django在Win7下的安装及创建项目hello word的例子 有关python 的django 框架安装与开发的小例子.Django在Win7下的安装及创建项目hello word.1.安装:命令如下:pip install Django==1.6.5 2.创建项目django-admin.py startproject web 修改 urls.pyurl(r'^blog/index/$','blog.views.index'), 3.创建工程:django-admin.py starta

mac下配置Node.js开发环境、express安装、创建项目

mac下配置Node.js开发环境.express安装.创建项目 一.node.js的安装 去官网下载对应的平台版本就可以了,https://nodejs.org 二.express安装 sudo npm install -g express 进行全局安装. 这时有可能会安装不成功,用下面的命令即可 sudo npm install express-generator -g 三.创建项目 终端输入 express -e 你的项目名称 -e 为使用ejs框架 express默认为jade,为了 学

vue-cli 3.0 安装和创建项目流程

使用前我们先了解下3.0较2.0有哪些区别 一.3.0 新加入了 TypeScript 以及 PWA 的支持二.部分命令发生了变化: 1.下载安装  npm install -g [email protected] 2.删除了vue list 3.创建项目   vue create 4.启动项目   npm run serve三.默认项目目录结构也发生了变化: 1.移除了配置文件目录,config 和 build 文件夹 2.移除了 static 文件夹,新增 public 文件夹,并且 ind

JavaScript自动化构建工具入门----grunt、gulp、webpack

蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 安装 常用插件.压缩插件.合并插件等.  用插件实现 功能无限扩展 简单介绍三种工具 grunt 是js任务管理工具(自动化构建工具)    -- Grunt官网 戳这里 优势:出来早 社区成熟  插件全 缺点:配置复杂   效率低 (cpu占用率高) -------------------------