上篇是年后的项目搭建的,时间比较仓促,感觉有点low

1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷

2.不支持vue-loader一样写模版语言和es6语法

最近h5端的项目,用了webpack+vue-router,用jade+es6+stylus瞬间感觉自己高大上了,es6用起来,感觉也是爽爽哒。(其实语法用的也不多,也就import,一些简单的新方法,主要是箭头函数,再也不用self=this了)所以考虑进行一次升级,使在web端可以简单支持vue require的加载,因为webpack打包配置还是太麻烦了

vue的支持,template html字符串,我们可以通过模版nodejs模版编译生成html字符串,转成eqport的template属性进行支持.想了各种方式,没有实现css的支持,有啥好像方法,可以留言交流

下面是gulp插件的代码,参照的vue-loader

var through = require('through2');
var gutil = require('gulp-util'); var parse5 = require('parse5');
var deindent = require('de-indent');
var validateTemplate = require('vue-template-validator');
var jade = require('jade'); module.exports = function(opt){
function run (file, encoding, callback) {
if (file.isNull()) {
return callback(null, file);
} if (file.isStream()) {
return callback(new gutil.PluginError('gulp-vue', 'doesn\'t support Streams'));
}
file.contents = new Buffer(vueWrite(file, file.contents.toString()));
file.path = file.path + '.js';
callback(null, file);
}
return through.obj(run);
} var getHTML = {//暂时只做了jade模版的支持,需要别的模版对该对象进行扩展
'jade' : function (content) {
return jade.compile(content, {})({})
},
'default': function (content) {
return content;
}
};
var splitRE = /\r?\n/g
var emptyRE = /^\s*$/
var commentSymbols = {
'iced': '#',
'iced-jsx': '#',
'iced-redux': '#',
'coffee': '#',
'coffee-jsx': '#',
'coffee-redux': '#',
'purs': '--',
'ulmus': '--'
} var vueWrite = function (file, content) {
var output = {
template: [],
style: [],
script: []
}
var fragment = parse5.parseFragment(content, {
locationInfo: true
});
fragment.childNodes.forEach(function (node) {
var type = node.tagName
var lang = (getAttribute(node, 'lang') || 'default').toLowerCase(); var warnings = null
if (!output[type]) {
return
}
// node count check
if ((type === 'script' || type === 'template') && output[type].length > 0) {
throw new Error(
'[glup-vue] Only one <script> or <template> tag is allowed inside a Vue component.'
)
}
// skip empty script/style tags
if (type !== 'template' && (!node.childNodes || !node.childNodes.length)) {
return
}
// template content is nested inside the content fragment
if (type === 'template') {
node = node.content
if (!lang) {
warnings = validateTemplate(node, content)
}
}
// extract part
var start = node.childNodes[0].__location.startOffset
var end = node.childNodes[node.childNodes.length - 1].__location.endOffset
var result
if (type === 'script') {
//将非script的内容进行当行注释,保持原文件行数,方便js错误查看
result = commentScript(content.slice(0, start), lang) +
deindent(content.slice(start, end)) +
commentScript(content.slice(end), lang)
} else {
result = deindent(content.slice(start, end))
}
output[type] = {
lang: lang,
content: result,
warnings: warnings
}
})
var lang = output.template.lang;
if (!getHTML[lang]) {
throw new Error(
'[glup-vue] ' + lang + ' html engine not support'
)
}
/*
return output.script.content
+ "\n;exports.default.template = '" + getHTML[lang](output.template.content, {}).replace(/(\\*)'/g, function (a, b) {
return (b||"").replace('\\', '\\\\') + "\\'"
}).replace(/\n/g, '\\\n') + "'";
*/
//try {
/*return output.script.content
+ "\n;exports.default.template = '" + getHTML[lang](output.template.content, {}).replace(/(\\*)'/g, function (a, b) {
return (b||"").replace('\\', '\\\\') + "\\'"
}).replace(/\n/g, '\\\n') + "'";*/
//对生成的html,'号进行替换,没有做多测试案例,可能有点小bug
return output.script.content
+ "\n;exports.default.template = '" + getHTML[lang](output.template.content, {}).replace(/(\\*)'/g, function (a, b) {
return (b||"").replace('\\', '\\\\') + "\\'"
}).replace(/\n/g, '\\\n') + "';";
//} catch (e) {
//console.log('message', e.message);
//} } function commentScript (content, lang) {
var symbol = getCommentSymbol(lang)
var lines = content.split(splitRE)
return lines.map(function (line, index) {
// preserve EOL
if (index === lines.length - 1 && emptyRE.test(line)) {
return ''
} else {
return symbol + (emptyRE.test(line) ? '' : ' ' + line)
}
})
.join('\n')
} function getCommentSymbol (lang) {
return commentSymbols[lang] || '//'
} function getAttribute (node, name) {
if (node.attrs) {
var i = node.attrs.length
var attr
while (i--) {
attr = node.attrs[i]
if (attr.name === name) {
return attr.value
}
}
}
}

本来想把requirejs加载的支持代码拼接在上面,但是测试发现,拼接后babel语法报错了,所以把这块逻辑放到了gulp构建文件里面,并加入了sourcemaps支持

var gulp = require('gulp');
var vuefile = require("./gulp-vue");
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var inject = require("gulp-inject-string");
gulp.task('default', () => {
return gulp.src('src/js/**/*.vue')
.pipe(sourcemaps.init())
.pipe(vuefile())
.pipe(babel({
presets: ['es2015']
}))
.pipe(inject.wrap('define(function (require) {var exports = {};', ';return exports.default;\n});'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js/'));
});

这样我们就可以用requirejs+vue搭建项目了,这个方式缺陷就是css需要通过别的方式加载,也不支持写在vue文件当中。基于这个,我就可以修改我的 electron + vue项目了

requirejs + vue 项目搭建2的更多相关文章

  1. requirejs + vue 项目搭建

    以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug, ...

  2. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  3. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  4. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  5. vue项目搭建 (一)

    vue项目搭建 (一) 由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以 ...

  6. Vue项目搭建流程 以及 目录结构构建

    Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...

  7. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  8. vue项目搭建介绍02

    目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...

  9. Vue项目搭建

    1.环境搭建 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --registry=https:// ...

随机推荐

  1. c语言字符串比较函数strcmp

    strcmp(s1,s2) 说明: 当s1<s2时,返回值<0 当s1=s2时,返回值=0 当s1>s2时,返回值>0两个字符串自左向右逐个字符相比(按ASCII值大小相比较) ...

  2. HDU 1068 - Girls and Boys

    求一个集合最多几个人,其之间任意两人没有暧昧关系. 二分图匹配 最大独立集 = 总点数 - 最大匹配数 匈牙利算法 因为每个同学都在二分图的两侧 当 A与B匹配时,B与A也匹配 所以 所求的最大匹配数 ...

  3. js 控制不能输入空格

    onkeydown="if(event.keyCode==32) return false"

  4. wxwidgets demo

    环境说明: IOS: mac 10.9 wx:  wxWidgets-2.9.5  (http://www.wxwidgets.org/downloads/) gcc: $gcci686-apple- ...

  5. Java编程思想——类型信息(RTTI)

    一.概念 编译时已知的到所有的类型:就是在写代码阶段就确定是这个类型了,当运行程序的时候,类型是不可改变的 举例:List<String> str = new ArrayList();   ...

  6. fdisk -l 找不到分区怎么办?想办法找到隐藏分区。

    centos6.6 装系统的时候,选取系统默认分区.装好后发现少了一大部分空间,通过fdisk -l 找不到分区,另外使用 parted -l 同样找不到消失的柱面. 如: [root@mysql]# ...

  7. ubtuntu 下 使用svn命令

    SVN作为日常开发中不可缺少的工具,今天终于开始在Ubuntu下使用了. 1.首先需要安装SVN.Ubuntu下的SVN安装十分简单,sudo apt-get install subversion,然 ...

  8. Java GC 日志详解(转)

    Java GC日志可以通过 +PrintGCDetails开启 以ParallelGC为例 YoungGC日志解释如下(图片源地址:这里) : FullGC(图片源地址:这里): http://blo ...

  9. 数据挖掘之分类算法---knn算法(有matlab例子)

    knn算法(k-Nearest Neighbor algorithm).是一种经典的分类算法.注意,不是聚类算法.所以这种分类算法 必然包括了训练过程. 然而和一般性的分类算法不同,knn算法是一种懒 ...

  10. 2.x ESL第二章习题2.5

    题目 描述 $y_i=x_i^T\beta+\epsilon_i$$\epsilon_i\sim N(0,\sigma^2)$ 已有训练集$\tau$,其中$X:n\times p,y:n\times ...