使用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 相关文章推荐
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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中实现简单的ACL 完结篇
2011/09/07 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JScript的条件编译
2007/05/29 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python中如何设置代码自动提示
2020/07/15 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
Shell脚本如何向终端输出信息
2014/04/25 面试题
中学劳技课教师的自我评价
2014/02/05 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
食品安全演讲稿
2014/09/01 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
小学教师读书笔记
2015/07/01 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers