整合和压缩构建网络程序

有以下步骤：1。创建一个新项目Bejs2。创建一个新的文件包. js3创建一个新的文件Gruntfile.js4在命令行1上执行grunt任务。在src下创建一个新的项目Bejs源代码，它有两个子目录asset和js。向下发送selector.js和ajax.js，在上一篇文章中已经介绍了如何合并和压缩它们。本文只关注资产目录，其中包含一些图片和css文件。两个css资源reset.css和style.css将被合并并压缩到dest/asset目录。all.css的合并版本和all-min.css的压缩版本.

第二，新的package.jsonpackage.json放在根目录下，它的含义已经介绍过了。目前项目结构如下。

Package.json内容要符合json语法规范，如下，复制代码如下： {'name' :' bejs '，' version' :' 0.1.0 '，' dev dependencies ' 3360 { ' Grunt ' 3360 ' ~ 0 . 4 . 0 '，Grunt-contrib-concat ' : ' ~ 0 . 1 . 1 '，' Grunt-CSS ' 3360 ' 0 . 0 ' } } Grunt-contrib-concat此时，打开命令行工具并输入项目的根目录，然后点击以下命令： NPM安装。

查看根目录，发现node_modules目录较多，包括4个子目录，如图。

第三，新文件gum file . jsgum file . js也放在项目的根目录下，几乎所有的任务都是在这个文件中定义的。它是一个普通的js文件，在其中可以编写任何js代码，而不仅仅是JSON。像package.json一样，应该像源代码一样提交给svn或git。

源代码复制如下： module . exports=function(grunt){//Configure grunt . init config({ pkg 3360 grunt . file . readjson(' package . JSON '))。concat : { CSS : { src : [' src/asset/*。css']，dest : ' dest/asset/all . CSS ' } }，CSS min : { CSS : { src : ' dest/asset/all . CSS '，dest : ' dest/asset/all-min . CSS ' } } })；//加载concat和css插件，分别用于合并和压缩grunt . load npmttasks(' grunt-contrib-concat ')；grunt . loadnpmtasks(' grunt-CSS ')；//默认任务grunt.registertask ('default '，['concat '，' cssmin '])；};第四，执行grunt任务，打开命令行，输入项目的根目录，键入grunt 。

从打印的信息可以看出，目的目录和预期文件已经成功合并和压缩。此时，项目目录中还有更多dest，如下所示。

至此，css合并和压缩完成。