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

有如下步骤:

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

时间: 2024-08-02 20:33:30

使用GruntJS构建Web程序之合并压缩篇_node.js的相关文章

使用GruntJS构建Web程序之安装篇_javascript技巧

它有以下作用     合并JS文件    压缩JS文件    单元测试(基于QUnit)    一句话:完全自动化(automation)  以下是它的安装过程. 一.安装node 参考nodejs入门 (最新的node会自动安装npm) 二.安装grunt命令行工具grunt-cli 使用-g全局安装,这样可以在任何一个目录里使用了.命令: npm install -g grunt-cli 需要注意的是在linux或mac下有时会报没有权限的错误,这时须在前面加一个sudo, 安装后,可以查看

如何提高WEB程序的效率 (第一篇SQL篇)  (转)

web|程序 如何提高WEB程序的效率 (第一篇"SQL篇") 很多网友非常不喜欢用ASP来编程,他们总是抱怨说ASP程序太慢,效率太低.更希望用PHP,JSP等来写程序.其实不能从 "认为" 这个角度来看问题 ,而应该从实际中看问题,ASP真的很慢的吗,那么微软的站为何用ASP也不慢呢?PHP真的很快吗,其实它也仍然是解释性的语言.只不过在Linux下的结合比较好而以.JSP的开发也不会简单到何处,而且要通过JDBC-ODBC桥才能连接ACCESS库等,这种情况下

ASP.NET与PHP构建web程序的方法的优缺点

比较这两种最流行的构建 web 应用程序的方法的优缺点 如今当提到 Web 开发时,您有许多选择.这些方法中许多都涉及到预处理 - 即,利用特定的标记将代码嵌入到 HTML 页面中,这些标记告诉预处理器,它们包含代码,并且应对它们作出处理.与 CGI 非常相似,这些代码在服务器上运行,并返回一些内容,这些内容表现为发回给浏览器的结果 HTML 页面的部分外观.开放源代码脚本语言 PHP 和 Microsoft 的 ASP.NET 框架中的语言都属于这种类型:JavaServer Pages (J

如何提高WEB程序的效率 (第一篇)

web|程序 很多网友非常不喜欢用ASP来编程,他们总是抱怨说ASP程序太慢,效率太低.更希望用PHP,JSP等来写程序.其实不能从 "认为" 这个角度来看问题 ,而应该从实际中看问题,ASP真的很慢的吗,那么微软的站为何用ASP也不慢呢?PHP真的很快吗,其实它也仍然是解释性的语言.只不过在Linux下的结合比较好而以.JSP的开发也不会简单到何处,而且要通过JDBC-ODBC桥才能连接ACCESS库等,这种情况下效率也不高. 其实,三种语言各有特点,就是优,缺点.作为一个程序员不应

Node.js实现JS文件合并小工具_node.js

临近春节,项目结束了,没事情做,于是就想学学node.js,之前写了一个是为了实验室项目的需要,用c#写了个js代码压缩合并的小插件,后来想到可以用node重构,于是就练练手吧,下面小编直接给大家上代码了. 代码如下所示: /*符合CommonJs规范*/ var writePath = 'min.js',/*默认输出到本目录min.js文件里*/ fs = require('fs'), r1 = /^(.+)$/mg,/*分行*/ r2 = /\s{2,}/g,/*去空格*/ r3 = /([

Ant+YUICompressor 合并压缩JS和CSS代码实例

在实际项目中,推荐的是一个html对应一个JS文件和一个CSS文件.这样做可以减少HTTP请求,众所周知,一个HTTP请求的延迟远比下载一个大点的文件大得多. 所以从程序员来看:我要分文件,分模块写.不然代码太混乱了.(多文件) 客户(网站的使用者)来看:我要良好的用户体验,越快越好.(少文件,文件一多HTTP请求会很多) 这就产生了冲突,不过有需求就有市场,我们聪明的前端攻城狮也有自己的方法解决.--链接文件与压缩大法,也就是标题"使用Ant和YUICompressor链接合并压缩你的JS和C

AngularJS结合RequireJS做文件合并压缩的那些坑

我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的pat

小心!AngularJS结合RequireJS做文件合并压缩的那些坑_javascript技巧

在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的paths

使用 Microsoft SQL Server 2000 的全文搜索功能构建 Web 搜索应用程序

server|web|程序|全文搜索 使用 Microsoft SQL Server 2000 的全文搜索功能构建 Web 搜索应用程序 Andrew B. CenciniMicrosoft Corporation 2002年12月 适用于:    Microsoft SQL Server 2000摘要:学习如何充分利用 SQL Server 2000 的全文搜索功能.本文包含有关实现最大吞吐率和最佳性能的几点提示和技巧. 目录简介 全文搜索功能简介 配置全文搜索功能 全文查询 排位和优化 其他