前言

对于前端开发者来说,资源打包是日常过程中一个必不可少的过程;目前我们大多数时候使用gruntgulpwebpack这三个工具来完成这个工作;但是有一个特点就是我们没创建一个项目都要对应的去编写配置来完成打包任务,相当的繁琐,而且各种各样的配置挺让人头疼的。本人就是基于这个原因开发了一个命令行打包工具——build release;现放上使用指南,欢迎各位前端爱好者交流指正!

安装

本工具强依赖于Compass,所以安装之前请先确保您的电脑已经成功安装Compass

npm install build-release -g

默认的项目打包解构

因为本工具对配置文件没有硬性要求,因此对文件目录会有一定规定(当然你可以根据自己的需求进行,详细的配置说回在本文后面补充),如图:

使用

编译css

release css

可选参数

  • -f 编译目录下的全部sass文件
  • -w 监控sass目录,如果sass文件有变化即时编译
  • -m 编译模式,默认expanded,生产环境建议用compressed(压缩模式)

压缩JavaScript

release js

可选参数

  • increment 只增量打包修改后的文件

压缩图片

release image

打包所有的资源

release all

配置

当然,本工具也接受自定义配置文件,它放在要要执行任务的目录下,命名为release.json,下面是一个配置的例子:

{
"compass" : {
"zip" : false
},
"uglify": {
"cwd" : "E:\\ljl\\project\\public",
"out" : "E:\\ljl\\project\\release",
"concat": {
"name": "core/main.min",
"specify": [
{
"core/base.min": ["about.js"]
}
]
},
"zip" : {
"target" : "js.zip"
}
}
}

结语

工具就介绍到,觉得不满意请绕道,有交流需要欢迎联系我(QQ:625846782);

前端打包工具——build release介绍的更多相关文章

  1. 项目前端打包工具从 NEJ 切换成 webpack

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...

  2. 前端打包工具之fis3的初级使用

    说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...

  3. grunt,gulp,webpack前端打包工具的特性

    1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...

  4. Webpack前端打包工具

    一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中.  但 ...

  5. js模块化方案以及前端打包工具

    图片来自知乎

  6. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  7. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  8. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  9. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

随机推荐

  1. Chipmunk僵尸物理对象的出现和解决(一)

    最近在写的BrickHit游戏App中出现了一个比较头疼的问题. 该问题很难用常规手段调试,因为其发生看起来貌似是随机的. 我想在这里将这个问题的现象和解决过程详细的记录下来,一来避免其他童鞋走弯路, ...

  2. Dynamics CRM2013 Server2012下部署ADFS和IFD遇到的问题No Organization were retrived

    最近一直在折腾Windows Server2012下的IFD部署,其中各种纠结啊错误百出,要想顺利的一步到位只能说看你的RP怎么样了,具体的操作过程推荐看下勇哥的博客:http://luoyong02 ...

  3. ant的设置properties

    特点 大小写敏感: 不可改变,先到先得,谁先设定,之后的都不能改变. 怎样设置 1 .设置 name 和 value 属性值,比如: <property name="srcdir&qu ...

  4. CSDN_投票评选_JS_分析脚本

    作者: 铁锚 日期: 2013年12月31日 如题, 使用说明如下: 1. 原创图书 http://special.csdn.net/book2013/yc.html 2. 引进图书 http://s ...

  5. sublime text (ST)一篇通(安装、配置、扩展、使用)

    sublime编辑器,功能插件多,可以扩展为IDE------------------------------------------- 1.安装 官网下载  http://www.sublimete ...

  6. 安卓Tv开发(二)移动智能电视之焦点控制(按键事件)

    原文:http://blog.csdn.net/sk719887916/article/details/44781475 skay 前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家 ...

  7. RB-tree (红黑树)相关问题

    今天被问到了红黑树的规则,简述总结一下: 1.每个节点不是红色就是黑色. 2.根节点为黑色. 3.如果节点为红,其子节点必须为黑. 4.任一节点至NULL(树尾端)的任何路径,所含之黑节点数必须相同. ...

  8. TrueType字体的后缀名解释

    OpenType标准定义了OpenType文件名称的后缀名.包含TureType字体的OpenType文件后缀名为.ttf,包含PostScript字体的文件后缀名为.OTF.如果是包含一系列True ...

  9. C语言之选择排序

    选择法排序是相对好理解的排序算法.假设要对含有n个数的序列进行升序排列,算法步骤是: 1.从数组存放的n个数中找出最小数的下标(算法见下面的"求最值"),然后将最小数与第1个数交换 ...

  10. 网站开发进阶(十八)js获取html标签中的值

    js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...