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


Posted in Javascript onJune 06, 2014

有如下步骤:

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。

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

二、新建package.json
package.json放在根目录下,它的意义上一篇已经介绍过了。 现在的项目结构如下

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

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

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

查看根目录,发现多了个node_modules目录,包含了四个子目录,见图

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

三、新建文件Gruntfile.js
Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

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

源码如下

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

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

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

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

至此,css合并压缩完毕。

Javascript 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 #Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 #Javascript
Node.js中对通用模块的封装方法
Jun 06 #Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 #Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 #Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 #Javascript
JavaScript也谈内存优化
Jun 06 #Javascript
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
p5.js入门教程之图片加载
2018/03/20 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
python Django模板的使用方法
2016/01/14 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python数学形态学实例分析
2019/09/06 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
招商专员岗位职责
2014/02/08 职场文书
活动总结模板
2014/05/09 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
小学语文业务学习材料
2014/06/02 职场文书
签证工作证明模板
2015/06/15 职场文书
八年级英语教学反思
2016/02/15 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
python在package下继续嵌套一个package
2022/04/14 Python