脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → GruntJS构建Web程序

使用GruntJS构建Web程序之合并压缩篇

 更新时间：2014年06月06日 10:58:34   作者：  
前一篇讲述了如何使用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语法规范，如下

复制代码 代码如下:

{
  "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。

源码如下

复制代码 代码如下:

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合并压缩完毕。

您可能感兴趣的文章:

相关文章

  • Node.js进行文件操作(读取/写入/修改/删除)详解

    Node.js进行文件操作(读取/写入/修改/删除)详解

    Node.js是一个神奇的东西，它可以让JavaScript在服务器端运行，让我们的很多前端程序员也能在后端大展身手了！本文就来讲讲如何在Node.js中进行文件操作：读取、写入、修改和删除文件吧
    2023-03-03
  • 学习Node.js模块机制

    学习Node.js模块机制

    这篇文章主要为大家详细介绍了Node.js模块机制，一篇关于Node.js模块机制的学习笔记，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 从零开始学习Node.js系列教程四：多页面实现的数学运算示例

    从零开始学习Node.js系列教程四：多页面实现的数学运算示例

    这篇文章主要介绍了Node.js多页面实现的数学运算,涉及nodejs请求响应、数值传递、运算等相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • Node.js的Koa实现JWT用户认证方法

    Node.js的Koa实现JWT用户认证方法

    本篇文章主要介绍了Node.js的Koa实现JWT用户认证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • NodeJs Express中间件使用流程解析

    NodeJs Express中间件使用流程解析

    Express中间件本质上就是一个function处理函数，多个中间件之间，共享同一份req和res，我们就可以在上游的中间件中统一为req或者res对象添加自定义的属性或方法，供下游的中间件或路由进行使用,非常方便
    2023-01-01
  • Nodejs+express+ejs简单使用实例代码

    Nodejs+express+ejs简单使用实例代码

    本篇文章主要介绍了Nodejs+express+ejs简单使用实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Nodejs进程管理模块forever详解

    Nodejs进程管理模块forever详解

    服务器管理是系统上线后，必须要面对的问题。最好有一个软件可以提供整套的服务器运行解决方案：要求运行稳定，支持高并发，启动/停止命令简单，支持热部署，宕机重启，监控界面和日志，集群环境。
    2014-06-06
  • 解决node.js中bcrypt遇到的安装问题

    解决node.js中bcrypt遇到的安装问题

    这篇文章主要介绍了解决node.js中bcrypt遇到的安装问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • windows如何把已安装的nodejs高版本降级为低版本(图文教程)

    windows如何把已安装的nodejs高版本降级为低版本(图文教程)

    这篇文章主要介绍了windows如何把已安装的nodejs高版本降级为低版本,本文分步骤通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • nodejs提示：cross-device link not permitted, rename错误的解决方法

    nodejs提示：cross-device link not permitted, rename错误的解决方法

    这篇文章主要给大家介绍了关于nodejs提示：cross-device link not permitted, rename错误的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用nodejs具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06

最新评论