源码地址: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. 初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs)

    我正在阿里云上创建一个简单的个人博客网站,刚好正在尝试NodeJs,决定找一款基于NodeJs的CMS来完成这个工作,最后找到了KeyStoneJS. KeyStoneJS是基于Express和Mon ...

  2. MVc Forms Membership rolemanage 角色权限验证管理

    Forms  登录验证Membership 权限验证rolemanage 角色管理 以往的项目中只有单纯的Forms 验证今天想把这三个结合到mvc 中发现要导入aspnet_ 相关表,但是有个问题验 ...

  3. Abp项目中的领域模型实体类访问仓储的方法

    首先声明,不推荐使用这种方法.实体访问仓储是不被推荐的! 1.简单粗暴的方法 Abp.Dependency.IocManager.Instance.Resolve>(); 2.绕个弯子的方法 首 ...

  4. nginx编译模块详解

    –prefix= 指向安装目录–sbin-path 指向(执行)程序文件(nginx)–conf-path= 指向配置文件(nginx.conf)–error-log-path= 指向错误日志目录–p ...

  5. [10]APUE:信号

    [a] 常用信号 SIGABRT 调用 abort 函数时产生此信号,进程异常终止 SIGALRM 调用 alarm 或 setitimer 函数超时之后产生 SIGCHLD 子进程终止或 stop ...

  6. cocos2dx的build_win32.dat出现问题以及install-template-msvc.dat出现.js没有脚本引擎

    关于cocos2dx-2.x.x版本当中出现build_win32.bat执行失败 (针对VS2013)应当在VS的安装路径查找msbuild的文件夹,再其中查找msbuild.exe文件找到四个东西 ...

  7. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  8. Winform中Grid跨行复制一列

    Private Sub DataCopyToGrid() '判断剪切板中是否存在内容 If Clipboard.ContainsText Then Dim str = Clipboard.GetTex ...

  9. ros学习笔记 - 深度传感器转换成激光数据(hector_slam)

    前提条件:1,确保读者已经安装了kinect或者其他深度摄像头的驱动,如果未安装,可以直接在网盘下载:http://pan.baidu.com/s/1hqHB10w 提取密码:wrmn 利用深度相机仿 ...

  10. Spring 配置 Spring JPA 发生错误的解决方法

    今天在项目的applicationContext.xml中配JPA时 <?xml version="1.0" encoding="UTF-8"?> ...