前端打包工具——build release介绍
前言
对于前端开发者来说,资源打包是日常过程中一个必不可少的过程;目前我们大多数时候使用grunt、gulp、webpack这三个工具来完成这个工作;但是有一个特点就是我们没创建一个项目都要对应的去编写配置来完成打包任务,相当的繁琐,而且各种各样的配置挺让人头疼的。本人就是基于这个原因开发了一个命令行打包工具——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介绍的更多相关文章
- 项目前端打包工具从 NEJ 切换成 webpack
此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...
- 前端打包工具之fis3的初级使用
说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...
- grunt,gulp,webpack前端打包工具的特性
1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...
- Webpack前端打包工具
一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中. 但 ...
- js模块化方案以及前端打包工具
图片来自知乎
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
- 前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
随机推荐
- 设计模式之——工厂模式(A)
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41085085 昨天看完了工厂模式,觉得在开发的过程中好多地 ...
- C++ Primer 有感(标准库map类型)
map是键-值对的集合.map类型通常可以理解为关联数组:可以使用键作为下标获取一个值,正如内置数组一样.而关联的本质在于元素的值于某个特定的键相关联,而并非通过元素在数组中的位置获取. 1.map对 ...
- pig的grunt中shell命令不稳定,能不用尽量不用
shell命令:mv a b 将文件a改名为b, 可如果b已经存在,比如/test文件下有a和b两个文件,执行mv a b后,b被覆盖的了.也就是/test文件下只有a. 但是mv命令在pig的g ...
- 【IOS 开发】Object - C 语法 之 类型转换
作者 : 万境绝尘 (octopus_truth@163.com) 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/3913507 ...
- 【UI 设计】PhotoShop基础工具 -- 移动工具
还是学点美工的东西吧, 业余爱好 比学编程还难 PS版本 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左侧的是工具栏, 每选中一个工具, 在菜单 ...
- Qt4项目迁移到Qt5问题:greaterThan(QT_MAJOR_VERSION, 4): QT += widgets .
文章来源:http://blog.csdn.net/ccf19881030/article/details/18220447 问题一:错误:C1083: 无法打开包括文件:"QApplica ...
- H5学习之旅-H5的基本标签(2)
H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...
- MinerHtmlThread.java 爬取页面线程
MinerHtmlThread.java 爬取页面线程 package com.iteye.injavawetrust.miner; import org.apache.commons.logging ...
- STL(标准模板库)理论基础,容器,迭代器,算法
基本概念 STL(Standard Template Library,标准模板库)是惠普实验室开发的一系列软件的统称.现然主要出现在C++中,但在被引入C++之前该技术就已经存在了很长的一段时间. ...
- SVN常用命令备注
1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain 简写:s ...