gulp-sfc-loader
v1.0.8
Published
Gulp plugin for html SFC
Downloads
8
Readme
Intro
Gulp-SFC-loader 是一个使用单文件组件思想，用于方便传统HTML 项目进行模块化，同时完成內联js 及css编译及抽离的gulp 插件；基于加载速度优化的策略，默认会开启对文件的压缩；
Install
npm install gulp-sfc-loaderConfig
默认设置
{
htmlMinify: true,
templateTag: 'template',
cssConfig: {
name: 'common',
outputDir: './',
basePath: '',
minify: true,
},
jsConfig: {
name: 'common',
outputDir: './',
basePath: '',
minify: true,
babelOption: {
presets: ['@babel/env']
},
},
layoutConfig: {
componentPattern: 'component',
isLayout: false,
layoutFile: './layout.ejs',
replaceTag: {
style: '<!-- __style__ -->',
script: '<!-- __script__ -->',
body: '<!-- __body__ -->',
}
}
}htmlMinify是否压缩html，默认开启templateTag模板替换标签，默认为templatecssConfigname导出css 的文件名，如果是字符串，则所有css 将合并在此文件中，也可以是一个带有文件目录参数的函数，可以解析使用当前目录名左作为css 文件名outputDir导出css 到指定的目录minify是否压缩，默认开启basePath输出到页面中时文件的路径，默认情况下将使用outputDir字段
jsConfigname导出js 的文件名，如果是字符串，则所有js 将合并在此文件中，也可以是一个带有文件目录参数的函数，可以解析使用当前目录名左作为js 文件名outputDir导出js 到指定的目录basePath输出到页面中时文件的路径，默认情况下将使用outputDir字段minify是否压缩，默认开启babelOptionbabel编译选项
layoutConfigcomponentPattern当文件夹目录包含此字符串时，视为模块处理isLayout是否读取layout 文件替换模版，默认为falsereplaceTagstyle模版文件中用于替换css 的标签，默认为<!-- __style__ -->script模版文件中用于替换js 的标签，默认为<!-- __script__ -->body模版文件中用于替换内容html 的标签，默认为<!-- __body__ -->
Usage
gulp.task('default', () => {
return gulp.src('./views/pages/**/*.ejs')
.pipe(ejsLoader({
cssConfig: {
// name字段如果为函数，可以使用文件的相对路径作为参数，规则可参考https://www.npmjs.com/package/vinyl#filerelative
name: (path) => {
return path.match(/\w+(?=\/)(?!\.html)/g)[0] ;
},
// name: 'common',
outputDir: './dist/css/',
basePath: '/public/dist/css/'
},
jsConfig: {
name: (path) => {
return path.match(/\w+(?=\/)(?!\.html)/g)[0] ;
},
outputDir: './dist/js/',
basePath: '/path/css/'
},
layoutConfig: {
isLayout: true,
layoutFile: './views/layout.ejs',
}
}))
.pipe(gulp.dest('./dist/pages/'));
})在layout中使用如下方式写入占位符，方便后续位置填充
./views/layout.ejs
<head>
<!-- __style__ -->
</head>
<body>
<!-- __body__ -->
<script src="vue.js"></script>
<!-- __script__ -->
</body>在单独文件中以下列形式写模版
<style>
div {
width: 40px;
height: 30px;
}
</style>
<!-- 此处支持内联css，只需使用inline属性即可，同时支持使用预处理器，目前支持post css和sass /scss，postcss 需在项目目录下配置.postcssrc 文件 -->
<style inline lang="postCss">
p {
color: #333;
font-size: 28px;
}
</style>
<!-- 页面html -->
<div class="mod">
<div class="view">
<!-- 支持使用@requireTpl方法引入组件到页面中 -->
<!-- 支持使用参数，目前支持使用 escapeEjs 参数将引入的ejs 文件中的<% 及 %> 替换为<%% 和 %%> -->
<!-- deprecated @requireTpl('./component/index.ejs', { escapeEjs: true }) -->
<!-- 现使用templateTag 字段作为模板替换标签，避免编译失败时渲染网页出现不必要字符的问题 -->
<template src="./component/index.ejs" escapeEjs></template>
</div>
</div>
<!-- js 支持使用es6 及以上语法，将编译压缩，同样支持内联，使用inline属性，babel 配置项可在babelrc中配置-->
<script inline>
const a = 2;
[1, 2, 3].map((n) => n + 1);
new Promise((res, rej) => {
setTimeout(res(10))
})
</script>
<!-- 对于带有type 为 x-templat 属性的script，将视为模版，将以压缩html 方式压缩标签中的代码。并附带在模版中 -->
<script type="text/x-template" id="tpl_xtemplate">
x-template support
</script>