使用GruntJS构建Web程序 (三)

使用GruntJS构建Web程序 (3)

?

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也是放在项目根目录下，几乎所有的任务都定义在该文件中，它就是一个普通的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

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

至此，css合并压缩完毕。

?

附件：

BeJS，另cssmin也不错

?