使用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 相关文章推荐
js验证表单大全
Nov 25 Javascript
犀利的js 函数集合
Jun 11 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
ES6的新特性概览
Mar 10 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
JS原生实现轮播图的几种方法
Mar 23 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
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python程序运行原理图文解析
2018/02/10 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
旅游市场营销方案
2014/03/09 职场文书
活动总结怎么写
2014/04/28 职场文书
保护水资源的标语
2014/06/17 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA