gulp插件(gulp-jmbuild),用于WEB前端构建
源码地址:https://github.com/jiamao/gulp-jmbuild
https://github.com/jiamao/gulp-jmbuild
gulp-jmbuild
gulp插件,用于WEB前端构建
安装
进入您做为构建工具用的目录
1.首先安装gulp
$ npm install -g gulp
$ npm install --save-dev gulp
2.安装其它依赖[q/gulp-jshint]。
$ npm install q
$ npm install gulp-jshint
3.安装gulp-jmbuild
$ npm install gulp-jmbuild
示例
在构建目录下创建 gbulpfile.js
var jshint = require('gulp-jshint');
var Q = require('q');
var gulp = require('gulp');
var path = require('path'); var jmbuild = require('gulp-jmbuild'); //配置文件
var config = {
"debug": false,//如果是true,则不全合并和压缩文件,也不会打md5码,支持监听
//项目根路径,后面的路径基本都是相对于它的。
"root": path.resolve('../'),
//构建目标目录,相对于root
"dest": "dist",
//js文件构建目标目录,相对于dest,,,如果你想把它放在不同的地方,可以用类似于../这种改变根路径的方法。
"jsDest": "static/js",
//html文件构建目标目录,相对于dest
"htmlDest": "",
//css文件构建目标目录,相对于dest
"cssDest": "static/css",
//JS文件基础路径段,主要用于模块化提取模块id用处,比例在static/js/test/a.js 构建时就会取static/js后的test/a做为模块id
"jsBase": "static/js",
//文件后缀的分隔符,例如:a.{md5}.js
"separator": ".",
//md5码取多少位,
"md5Size": 8,
//JS需要构建的配置
"js": [
{
//构建源,跟gulp的source方法保持一致,可以是单个文件/目录*.js/数组
//以下所有类同
"source": "static/js/*.js",
//是否加上md5后缀,默认false
'md5': true,
//名称扩展,会直接加到文件名后缀前,例如:a.324242.lc.js
"expand": 'lc'
},
{
"source": ["static/js/test/**/*.js"],
//用于把source中的所有文件合并到同一个文件,并命名为此配置值
"concat": "t.js",
'md5': true,
//当前配置发布位置,相对于jsDest配置,如果不配置则默认放到jsDest下。
"dest": 'test'
}
],
"css": [
{
"source": "static/css/*.css",
"md5": true
}
],
"html": [
{
"source": "index.html",
//当有inline模块化js文件时,理否把它依赖的模块一同内嵌进来,默认为false
"includeModule": true
}
],
//普通文件构建,可以用于图片拷贝和打md5码
"files": [
{
"source": "static/img/*.*",
"md5": true,
"dest": "static/img"
}
]
}; //语法检测
gulp.task('jshint', function () {
var sources = [];
if(config.js && config.js.length) {
for(var i=0;i<config.js.length;i++) {
if(typeof config.js[i] == 'string') {
sources.push(config.js[i]);
}
else {
if(Array.isArray(config.js[i].source)) {
sources = sources.concat(config.js[i].source);
}
else {
sources.push(config.js[i].source);
}
}
}
}
console.log('jshint:');
return gulp.src(sources, {cwd:config.root})
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); //生成压缩JS任务
var jstasks = jmbuild.jsTask(gulp, config, ['jshint']);
//创建任务,用于执行前面创建的任务
gulp.task('minifyJS', jstasks,function (){
console.log('minifyJS-start');
var deferred = Q.defer();
deferred.resolve();
return deferred.promise;
}); //一般文件处理
var filetasks = jmbuild.fileTask(gulp, config, []);
gulp.task('cpFile', filetasks,function (){
console.log('cpFile-start');
var deferred = Q.defer();
deferred.resolve();
return deferred.promise;
}); //压缩css
var csstasks = jmbuild.cssTask(gulp, config, ['cpFile']);
gulp.task('minifyCSS', csstasks,function (){
console.log('minifyCSS-start');
var deferred = Q.defer();
deferred.resolve();
return deferred.promise;
}); //生成html解析主任务
var htmlTasks = jmbuild.htmlTask(gulp, config, ['minifyJS', 'minifyCSS']);
gulp.task('parseHTML', htmlTasks, function (){
var deferred = Q.defer();
deferred.resolve();
return deferred.promise;
}); gulp.task('default', ['jshint','minifyJS', 'cpFile', 'minifyCSS','parseHTML']);
运行
在gulpfile.js目录下执行如下命令
$ gulp
用法
html构建时路径处理说明:如果以 .或 / 开头,则它相对的是构建配置 dest 目录;
如果不是,则当为 .js 就会以jsDest为路径,.css就会以cssDest配置路径来计算绝对路径。 如果以上条件都不符合,则以当前html文件目录为当前路径来计算。
1.__pkg/__uri函数
当在html中使用__pkg('xxx')/__uri('XXX')时,构建时会被自动替换成对应文件路径,如果有配置md5会自动带上md5码(配置在config的配置中)。 例如:
<link rel="stylesheet" href="__uri('static/css/style.css')" />
<script src="__uri(static/js/a.js)"></script>
var a=__pkg('/static/js/a.js');
var t=__pkg('test/t.js');
构建后:
<link rel="stylesheet" href="static/css/style.95cc4059.css" />
<script src="static/js/a.49ea7d65.js"></script>
var a="/static/js/a.49ea7d65.js";
var t="test/t.fbdd9f3d.js";
2.__inline函数
此函数为把对应的文件内容(构建后的)内联到当前html中。
!!#ff0000 注:如果当前html构建配置中有指定"includeModule": true 则当inline一个模块化js文件时,会同时把它所有依赖js一起内联进来。!!
例如:
<style>
__inline('/static/css/style.css')
</style>
<script>
__inline('test/t.js', 'a.js');
</script>
构建后:
<style>
body,html{margin:0;padding:0}...略
</style>
<script>
define("a",[],function(n,a,i){a.run=function(){alert("i am a")}});
define("b",["./a"],function(n,i,a){var f=n("./a");i.init=function(){f.run("b")}});
define("test/c",["../b"],function(i,n,t){var b=i("../b");n.init=function(){b.init("b")}});
define("test/dir/d",["../../b"],function(i,n,t){var d=i("../../b");n.init=function(){d.init("d")}});
</script>
3.css中的import语法
当构建css文件时,会把@import url("./base.css?__inline");指定的文件合并到当前css中。
gulp插件(gulp-jmbuild),用于WEB前端构建的更多相关文章
- 前端构建大法 Gulp 系列 (一):为什么需要前端构建
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- Gulp.js----比Grunt更易用的前端构建工具
Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...
- 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件
安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...
- EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端
EasyNVR前端为了更好的用户体验,不仅仅设有PC客户端,还适应移动客户端: EasyNVR的客户端中PC端和移动端差异有很多.例如: 由于PC端.移动端自身硬件的差异,所需要展示的样式也会存在一定 ...
- EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据
区分分享还是跳转 对于前端一些页面的展示,通常有两种方式:通过入口链接一步步进入,或是通过分享链接直接进入:对于这两种方式的区别是什么?在进行前端书写时又应该如何处理? 以EasyNVR为例来进行说明 ...
- 前端构建大法 Gulp 系列 (四):gulp实战
前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...
- 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 前端构建大法 Gulp 系列 (二):为什么选择gulp
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
随机推荐
- FormatMessage与GetLastError配合使用,排查windows api调用过程中的错误
前一段时间在学习windows api调用过程中,遇到过一些调用错误或者程序没能显示预期的结果,或者直接出现vc运行时错误. 这对新手来说是司空见惯的事,因为不太熟悉难免会出错,出错的信息如果能显示很 ...
- 有向图强连通分量的Tarjan算法
有向图强连通分量的Tarjan算法 [有向图强连通分量] 在有向图G中,如果两个顶点间至少存在一条路径,称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G ...
- leetcode解题:Add binary问题
顺便把之前做过的一个简单难度的题也贴上来吧 67. Add Binary Given two binary strings, return their sum (also a binary strin ...
- VS 快捷键(待完善)
本人使用的是VS2010版本的 感觉还算稳定. 快捷键: 1. Ctrl+E,U 用于对选中的代码行快速对齐: 2. Ctrl+R,E 用于对象属性的重构,比如对get,set属性的快速设置. 方法: ...
- Jmeter测试结果分析
*.jtl文件内容: 请求发出的绝对时间,响应时间,请求的标签,返回码,返回消息,请求所属的线程,数据类型,是否成功,字节, 响应时间 1458294513309, 382 ...
- php嵌套数组递归搜索返回数组key
var rewardTypes={"experience":{"\u7ecf\u9a8c\u503c":{"1":"\u660e\ ...
- 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)
两种原因: 第一种为程序的运行以平台系统位数不匹配,第二种则是该死的VS整出来的... 一般在下面三种情景下会发生. 1.64位系统上C#调用32位的C++ *.dll 2.64位系统上IIS发布含有 ...
- codingNet项目的创建
首先,在codingNet上面创建一个项目(一般情况下) 然后,在本地打开项目并添加到储存库 其次,提交代码到已经创建好的项目中(注意赋值远程存储库的路径)
- UIActivityIndicatorViewStyle
UIActivityIndicatorView *indicatorV = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyl ...
- html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...