使用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中的一些错误类型

    NodeJS 的错误处理让人痛苦,在很长的一段时间里,大量的错误被放任不管。但是要想建立一个健壮的 Node.js 程序就必须正确的处理这些错误,而且这并不难学。下面跟着小编一起来学习学习。
    2016-08-08
  • npm使用国内淘宝镜像的两种方法

    npm使用国内淘宝镜像的两种方法

    npm install时候,默认是去npm镜像源获取,很多时候蜗牛一样的速度,所以需要将安装源设置成国内的源,这样速度就会快很多,本文就来介绍一下npm使用国内淘宝镜像的两种方法,感兴趣的可以了解一下
    2023-08-08
  • node.js中的fs.symlink方法使用说明

    node.js中的fs.symlink方法使用说明

    这篇文章主要介绍了node.js中的fs.symlink方法使用说明,本文介绍了fs.symlink的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • window系统 nodejs安装opencv环境配置图文详解

    window系统 nodejs安装opencv环境配置图文详解

    这篇文章主要介绍了window系统 nodejs安装opencv环境配置,结合图文形式详细分析了window环境下 nodejs安装opencv的具体步骤、注意事项
    2023-04-04
  • nodejs操作mongodb的增删改查功能实例

    nodejs操作mongodb的增删改查功能实例

    这篇文章主要介绍了nodejs操作mongodb的增删改查功能,简单分析了mongodb模块的安装并结合实例形式分析了nodejs操作mongodb数据库进行增删改查的相关实现技巧,需要的朋友可以参考下
    2017-11-11
  • node.js中的fs.ftruncate方法使用说明

    node.js中的fs.ftruncate方法使用说明

    这篇文章主要介绍了node.js中的fs.ftruncate方法使用说明,本文介绍了fs.ftruncate的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • 基于node.js实现爬虫的讲解

    基于node.js实现爬虫的讲解

    今天小编就为大家分享一篇关于基于node.js实现爬虫的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 深入理解 Koa 框架中间件原理

    深入理解 Koa 框架中间件原理

    koa是目前node里最流行的web框架。这篇文章主要介绍了理解 Koa 框架中间件原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Node.js安装教程和NPM包管理器使用详解

    Node.js安装教程和NPM包管理器使用详解

    这篇文章主要介绍了Node.js安装教程和NPM包管理器使用详解,安装部分讲解了Windows、和MAC OS下的安装图解,并介绍了Linux下的源码安装方法,最后对NPM包管理器做了详细介绍,需要的朋友可以参考下
    2014-08-08
  • node.js中cluster的使用教程

    node.js中cluster的使用教程

    这篇文章主要介绍了node.js中cluster的使用教程,分别介绍使用NODE中cluster利用多核CPU、通过消息传递来监控工作进程状态以及杀死僵尸进程等功能,给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-06-06

最新评论