使用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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python数据结构之单链表详解
2017/09/12 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python实现银行管理系统
2019/10/25 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
2014年迎新年活动方案
2014/02/19 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
党小组意见范文
2015/06/08 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android
TS 类型收窄教程示例详解
2022/09/23 Javascript