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


有如下步骤:

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



相关阅读:
微信WeixinJSBridge API使用实例
C#分析URL参数并获取参数和值对应列表的方法
js简单网速测试方法完整实例
TypeScript 中接口详解
JS网页播放声音实现代码兼容各种浏览器
Oracle中使用DBMS_XPLAN处理执行计划详解
CSS中height和width在IE和其他浏览器中的区别图文详解
Win8系统交换机如何设置?Win8系统设置交换机的方法
Android中简单调用图片、视频、音频、录音和拍照的方法
基于HTML模板和JSON数据的JavaScript交互(移动端)
jQuery实现的多屏图像图层切换效果实例
javascript根据像素点取位置示例
重装win7系统后开机提示inconsistent filesystem导致无法启动的故障分析及解决方法
AngularJS 使用 UI Router 实现表单向导
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 作文成长回眸 如何克服职场消极心态 竞聘指南:竞聘演讲时常用的四种手势 烛光里的妈妈作文150字 2017年除夕作文怎么写500字 推荐信写作要素 美丽宽容的好妈妈作文 村团支部年度工作计划 实习单位鉴定意见大全 鞋匠的儿子读后感 在生活中我快乐地向前,多沉重的担子我不会发软 夏令营活动作文600字 学习党的纲领思想汇报范文 你永远是我心头永远的痛 描述美好生活的句子 作家作文550字 苹果创始人乔布斯的励志故事 三字境 爱情经典优美语录 谦卑的心 这个秋天有点悲伤 2015幼儿园教研工作计划 网络的利与弊作文800字 星光作文700字 最初的等待,我不离不弃作文1200字 七年级语文教学工作总结(上学期) 过蜀龙门 2015年应届生求职信范文模板 金秋——丰收的季节 爱笑的“葫芦”作文 强者最不想看到什么 成功为人处世的54条名言 家一有大方姑姑作文800字 为期15天的医院实习结束报告 励志故事《每天进步一点点》 人生是什么呀!作文250字 告诉你我的一个故事作文700字 停留在灵魂深处那份爱 对职业生涯规划的认识 小学四年级作文350字:文具的哭诉 初中初一作文650字:好学之星竞选稿 【双调】水仙子_仲春湖上雨 县人大工作安排 时间催人前进,时光留人脚步 爸爸是个独特的职务 “小书迷”的故事 千秋岁(春欲去,二妙老人戏作长短句留之,为社中一笑) 《为你坚持》作文400字 发展现代品牌农业经验交流材料 初二作文800字:偶然,必然?

Copyright © 2016 phpStudy |