使用GruntJS构建Web程序 (3)

使用GruntJS构建Web程序 (3)

前一篇讲述了如何使用concat和uglify命令实现JavaScript资源的合并，压缩。这篇讲述下css资源的合并和压缩。

有如下步骤：

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

一、新建项目Bejs

源码放在src下，该目录有两个子目录asset和js。js下放selector.js和ajax.js，这在上一篇已经讲了如何合并压缩它们。这篇只关注asset目录，asset目录下放了一些图片和css文件。一会会把两个css资源reset.css和style.css合并，压缩到dest/asset目录。一个合并版本all.css，一个压缩版本all-min.css。

二、新建package.json

package.json放在根目录下，它的意义上一篇已经介绍过了。 现在的项目结构如下

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


1

2

3

4

5

6

7

8

9

{

  "name": "BeJS",

  "version": "0.1.0",

  "devDependencies": {

    "grunt": "~0.4.0",

    "grunt-contrib-concat": "~0.1.1",

    "grunt-css":   ">0.0.0"

  }

}

grunt-contrib-concat上一篇已经介绍过了，grunt-css 是这篇要使用的插件。

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


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

三、新建文件Gruntfile.js

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

源码如下


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

module.exports = function(grunt) {

    // 配置

    grunt.initConfig({

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

        concat : {

            css : {

                src: [‘src/asset/*.css‘],

                dest: ‘dest/asset/all.css‘

            }

        },

        cssmin: {

            css: {

                src: ‘dest/asset/all.css‘,

                dest: ‘dest/asset/all-min.css‘

            }

        }

    });

    // 载入concat和css插件，分别对于合并和压缩

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

    grunt.loadNpmTasks(‘grunt-css‘);

    // 默认任务

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

};

四、执行grunt任务

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

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

至此，css合并压缩完毕。

BeJS

另cssmin也不错

时间： 2024-10-10 19:31:02

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

使用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程序 (2)

Snandy Stop, thinking is the essence of progress. 使用GruntJS构建Web程序 (2) 前一篇记录了Grunt的安装,这篇介绍下怎么使用Gruntjs来搭建一个前端项目,然后使用grunt合并,压缩JS文件. 大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一.新建项目Bejs 源码放在src下,该目录有两个js文件,selector.js和ajax.js.编译后

使用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