使用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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
js中less常用的方法小结
Aug 09 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
JS中如何优雅的使用async await详解
Oct 05 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 XML数据解析代码
2010/05/26 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
用于table内容排序
2006/07/21 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
JavaScript数据类型详解
2015/04/01 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python Web开发你要理解的WSGI & uwsgi详解
2018/08/01 Python
python之生成多层json结构的实现
2020/02/27 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
学习新党章思想汇报
2014/01/09 职场文书
人事专员的岗位职责
2014/03/01 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
六一儿童节活动总结
2014/08/27 职场文书
出租房屋协议书
2014/09/14 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
建党伟业的观后感
2015/06/01 职场文书
贫困证明书范文
2015/06/16 职场文书
增值税发票丢失证明
2015/06/19 职场文书