使用GruntJS构建Web程序 (2)

Snandy

Stop, thinking is the essence of progress.

使用GruntJS构建Web程序 (2)

前一篇记录了Grunt的安装,这篇介绍下怎么使用Gruntjs来搭建一个前端项目,然后使用grunt合并,压缩JS文件。

大概有如下步骤

  1. 新建项目Bejs
  2. 新建文件package.json
  3. 新建文件Gruntfile.js
  4. 命令行执行grunt任务

一、新建项目Bejs

源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会自动生成。

二、新建package.json

package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。它应该和源码一样被提交到svn或git。 现在的项目结构如下

package.json内容需符合JSON语法规范,如下


1

2

3

4

5

6

7

8

9

10

{

  "name""Bejs",

  "version""0.1.0",

  "devDependencies": {

    "grunt""~0.4.0",

    "grunt-contrib-jshint""~0.1.1",

    "grunt-contrib-uglify""~0.1.2",

    "grunt-contrib-concat""~0.1.1"

  }

}

devDependencies中的grunt在前一篇已经安装了,grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat则没有安装。三个分别对于三个任务(task)

  • grunt-contrib-jshint js语法检查
  • grunt-contrib-uglify 压缩,采用UglifyJS
  • grunt-contrib-concat 合并文件

此时,打开命令行工具进入到项目根目录,敲如下命令: npm install


再查看根目录,发现多了个node_modules目录,包含了四个子目录,见图

三、新建文件Gruntfile.js

Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

Gruntfile.js由以下内容组成

  1. wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API


    1

    2

    3

    module.exports = function(grunt) {

      // Do grunt-related things in here

    };

  2. 项目和任务配置
  3. 载入grunt插件和任务
  4. 定制执行任务

该示例完成以下任务

  1. 合并src下的文件(ajax.js/selector.js)为domop.js
  2. 压缩domop.js为domop.min.js
  3. 这两个文件都放在dest目录下

最终的Gruntfile.js如下


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

module.exports = function(grunt) {

    // 配置

    grunt.initConfig({

        pkg : grunt.file.readJSON(‘package.json‘),

        concat : {

            domop : {

                src: [‘src/ajax.js‘‘src/selector.js‘],

                dest: ‘dest/domop.js‘

            }

        },

        uglify : {

            options : {

                banner : ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘

            },

            build : {

                src : ‘dest/domop.js‘,

                dest : ‘dest/domop.min.js‘

            }

        }

    });

    // 载入concat和uglify插件,分别对于合并和压缩

    grunt.loadNpmTasks(‘grunt-contrib-concat‘);

    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

    // 注册任务

    grunt.registerTask(‘default‘, [‘concat‘‘uglify‘]);

};

四、执行grunt任务

打开命令行,进入到项目根目录,敲 grunt

从打印信息看出成功的合并和压缩并生成了dest目录及期望的文件,这时的项目目录下多了dest,如下

ok,这里介绍了2个常见任务concat和uglify,jshint等没有介绍。Gruntfile.js里的代码也没有一一解读,感兴趣的同学可在gruntjs的官方文档找到。

相关:

Bejs

https://npmjs.org/doc/json.html

时间: 2024-10-11 20:48:04

使用GruntJS构建Web程序 (2)的相关文章

使用GruntJS构建Web程序 (1)

使用GruntJS构建Web程序 (1) Gruntjs是JavaScript项目的构建工具,也是基于node的一个命令行工具.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等.它有以下作用 合并JS文件 压缩JS文件 单元测试(基于QUnit) 一句话:完全自动化(automation) 以下是它的安装过程. 一.安装node 参考nodejs入门 (最新的node会自动安装npm) 二.安装grunt命令行工具grunt-cli 使用-g全局安装,这样可以在任何一个目

使用GruntJS构建Web程序 (3)

使用GruntJS构建Web程序 (3) 前一篇讲述了如何使用concat和uglify命令实现JavaScript资源的合并,压缩.这篇讲述下css资源的合并和压缩. 有如下步骤: 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一.新建项目Bejs 源码放在src下,该目录有两个子目录asset和js.js下放selector.js和ajax.js,这在上一篇已经讲了如何合并压缩它们.这篇只关注asset目录,asset目录下放

使用GruntJS构建Web程序

Gruntjs是JavaScript项目的构建工具,也是基于node的一个命令行工具.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等.它有以下作用 合并JS文件 压缩JS文件 单元测试(基于QUnit) 一句话:完全自动化(automation) 以下是它的安装过程. 一.安装node 参考nodejs入门 (最新的node会自动安装npm) 二.安装grunt命令行工具grunt-cli 使用-g全局安装,这样可以在任何一个目录里使用了.命令: npm install

spring mvc构建WEB应用程序入门例子

在使用spring mvc 构建web应用程序之前,需要了解spring mvc 的请求过程是怎样的,然后记录下如何搭建一个超简单的spring mvc例子. 1) spring mvc的请求经历 请求由DispatcherServlet分配给控制器(根据处理器映射),在控制器完成处理后,请求会被发送到一个视图(根据viewController解析逻辑视图) 来呈现输出结果. 整理成下图所示: 2)搭建一个简单的spring mvc例子 ①创建一个maven工程,其中pom中要有spring相关

用 HTML 5 构建 Web 应用程序

简介基于 HTML 5 已经涌现出了很多新的特性和标准.一旦您发现了当今浏览器中的一些可用的特性,就可以在您的[color=#444444 !important]应用程序中充分利用这些特性.在本文中,通过开发一些示例应用程序来了解如何探寻和使用最新的 Web 技术.本文的绝大多数代码都是 HTML.JavaScript 和 CSS — Web 开发人员的核心技术.立即开始为了能跟随我们的示例进行学习,最重要的一件事情是要有多个浏览器供测试使用.建议使用 Mozilla Firefox.Apple

构建应用程序的工具

构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化的方式进行配置,所以维护起来相当困难. Gradle:Gradle采用增量构建.Gradle通过Groovy编程而不是传统的XML声明进行配置.Gradle可以很好地配合Maven进行依赖管理,并且把Ant脚本当作头等公民. 字节码操作 编程操作Java字节码的函数库. ASM:通用底层字节码操作及

让你的web程序“动”起来。

看到这里你可能会问,asp.net程序本身就是动态网站,还要如何动? 我这里所谓的动起来,是指动态加载,动态更新.好吧可能你又要问了动态网站本来就是动态加载,动态更新的.asp.net的程序依附于IIS(当然不是唯一)运行的,有代码的更新,只需要拷贝到对应的目录下面.刷新界面就加载最新程序了.无需重启IIS. 但是我这里所说的是动态加载脚本.这里的脚本是C#的类文件(*.cs)文件动态编译加入内存运行实例. 可能有人要问,这个有什么必要???? 如果程序有修改,修改-编译-拷贝.就是最新程序,不

[Ruby on Rails系列]3、初试Rails:使用Rails开发第一个Web程序

本系列前两部分已经介绍了如何配置Ruby on Rails开发环境,现在终于进入正题啦! Part1.开发前的准备 本次的主要任务是开发第一个Rails程序.需要特别指出的是,本次我选用了一个(PaaS开发平台),也就是Rails教程中介绍的Cloud 9平台,该平台已经自动为我们作好了环境配置的工作:只要你有一个浏览器就可以使用该云端开发环境.非常的方便快捷!简直赞!平台网址如下:https://c9.io/ Cloud 9开发平台的实质是为每一个注册的开发者在服务器端分配一个Linux虚拟机

《Go语言入门》第一个Go语言Web程序——简单的Web服务器

概述 上一篇讲了 <Go语言入门>第一个Go语言程序--HelloWorld,接下来讲一下Go语言Web开发入门必修课:第一个Go语言Web程序--简单的Web服务器. 与其它Web后端语言不同,Go语言需要自己编写Web服务器. 有关本地环境的搭建与基础学习,请参考: <Go语言入门>如何在Windows下安装Go语言编程环境 Go语言Web应用:IBM的云平台Bluemix使用初体验--创建Go语言 Web 应用程序,添加并使用语言翻译服务 Web服务器代码 Google在ht