源码地址: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前端构建的更多相关文章

  1. 前端构建大法 Gulp 系列 (一):为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  2. Gulp.js----比Grunt更易用的前端构建工具

    Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...

  3. 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件

    安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...

  4. EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端

    EasyNVR前端为了更好的用户体验,不仅仅设有PC客户端,还适应移动客户端: EasyNVR的客户端中PC端和移动端差异有很多.例如: 由于PC端.移动端自身硬件的差异,所需要展示的样式也会存在一定 ...

  5. EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据

    区分分享还是跳转 对于前端一些页面的展示,通常有两种方式:通过入口链接一步步进入,或是通过分享链接直接进入:对于这两种方式的区别是什么?在进行前端书写时又应该如何处理? 以EasyNVR为例来进行说明 ...

  6. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

  7. 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  8. 前端构建大法 Gulp 系列 (二):为什么选择gulp

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  9. 前端构建工具gulp介绍

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

随机推荐

  1. js替换选中的文字

    替换html中选中的文字 function replaceSelection() { if (window.getSelection) { var selecter = window.getSelec ...

  2. linux 下进程通讯详解

    linux 下进程通讯方法主要有以下六种: 1.管道 2.信号 3.共享内存 4.消息队列 5.信号量 6.socket

  3. string&&char 小技巧

    关于string =,assign()   //赋以新值 swap()   //交换两个字符串的内容 +=,append(),push_back() //在尾部添加字符 insert() //插入字符 ...

  4. 关于Linkedlist 和 ArrayDeque的讨论

    转自:http://blog.csdn.net/f2006116/article/details/51375470 其中:我们要讨论的LinkedList和ArrayDeque都是实现Deque接口, ...

  5. 近期微博吐槽言论存档,涉及“性能优化”、C++陋习等

    写C++程序的几个陋习:class 名以大写 C 开头,例如 CDate:成员变量以 m_ 开头:变量采用匈牙利命名法:不知道何时禁用 copy-ctor/assign operator.前三个可能是 ...

  6. mac上的git completion

    只安装bash-completion,是没有git补全的,因为此时/usr/local/etc/bash-completion.d/下面没有git-XXX.sh 解决方法是brew install g ...

  7. aa5

    var placeList = [ {name:'海门', geoCoord:[121.15, 31.89]}, {name:'鄂尔多斯', geoCoord:[109.781327, 39.6082 ...

  8. 123. Best Time to Buy and Sell Stock (三) leetcode解题笔记

    123. Best Time to Buy and Sell Stock III Say you have an array for which the ith element is the pric ...

  9. [php-src]窥探Php内核中的数组与面向对象

    内容均以php5.6.14为例. 扩展中定义一个类有以下四步: #1. 声明一个存储类信息的指针. zend_class_entry *errs_ce; #2. 定义方法的参数信息,类的方法实现. Z ...

  10. 【java】:通用小知识

    1.将String字符串放在最前面 为了防止偶发性的NullPointerException 异常,我们通常将String放置在equals()函数的左边来实现字符串比较,如下代码: // Bad i ...