proper naming conventions

This commit is contained in:
Philipp Dormann 2020-08-29 18:42:14 +02:00
parent 196d6254cb
commit 19528778a9
7 changed files with 19 additions and 19 deletions

View File

@ -10,21 +10,21 @@ yarn && yarn build
[Example](index.html) [Example](index.html)
Basic: Link the dist file "mailymaily-min.js" at the bottom of your footer. Basic: Link the dist file `mailymaily.min.js` at the bottom of your footer.
```html ```html
<script src="your/path/to/mailymaily-min.js"></script> <script src="your/path/to/mailymaily.min.js"></script>
``` ```
Alternatively: Add defer or async=false when linking in the header Alternatively: Add defer or async=false when linking in the header
```html ```html
<script src="your/path/to/mailymaily-min.js" defer></script> <script src="your/path/to/mailymaily.min.js" defer></script>
<!-- or --> <!-- or -->
<script src="your/path/to/mailymaily-min.js" async=false></script> <script src="your/path/to/mailymaily.min.js" async=false></script>
``` ```
### VueJS & NuxtJs ### VueJS & NuxtJs
Place the dist file "mailymaily-min.js" in the static folder. Place the dist file "mailymaily.min.js" in the static folder.
Link the dist file at the bottom of your layout, for example: Link the dist file at the bottom of your layout, for example:
```html ```html
<template> <template>
@ -32,7 +32,7 @@ Link the dist file at the bottom of your layout, for example:
<Header /> <Header />
<Nuxt /> <Nuxt />
<Footer /> <Footer />
<script src="/libs/mailymaily-min.js"></script> <script src="/libs/mailymaily.min.js"></script>
</div> </div>
</template> </template>
``` ```

File diff suppressed because one or more lines are too long

1
dist/mailymaily.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
const { src, dest, parallel, series, watch } = require('gulp'); const { src, dest, series } = require('gulp');
const autoprefixer = require('gulp-autoprefixer'); const autoprefixer = require('gulp-autoprefixer');
const minify = require('gulp-minify'); const minify = require('gulp-minify');
const cleanCSS = require('gulp-clean-css'); const cleanCSS = require('gulp-clean-css');
@ -10,9 +10,9 @@ const sass = require('gulp-sass');
const replace = require('gulp-replace'); const replace = require('gulp-replace');
// //
function html() { function html() {
return src('./src/html/component.html') return src('./src/component.html')
.pipe(htmlMin({ collapseWhitespace: true })) .pipe(htmlMin({ collapseWhitespace: true }))
.pipe(rename('./src/html/component-min.html')) .pipe(rename('./src/component.min.html'))
.pipe(dest('./')); .pipe(dest('./'));
} }
function css() { function css() {
@ -20,19 +20,19 @@ function css() {
.pipe(sass()) .pipe(sass())
.pipe(autoprefixer()) .pipe(autoprefixer())
.pipe(cleanCSS()) .pipe(cleanCSS())
.pipe(rename('./src/css/component-min.css')) .pipe(rename('./src/css/component.min.css'))
.pipe(dest('./')); .pipe(dest('./'));
} }
function js() { function js() {
const css = fs.readFileSync('./src/css/component-min.css'); const css = fs.readFileSync('./src/css/component.min.css');
const html = fs.readFileSync('./src/html/component-min.html'); const html = fs.readFileSync('./src/component.min.html');
return src('./src/js/mailymaily.js') return src('./src/mailymaily.js')
.pipe(replace(/___css_inserter___/g, css)) .pipe(replace(/___css_inserter___/g, css))
.pipe(replace(/___html_inserter___/g, html)) .pipe(replace(/___html_inserter___/g, html))
.pipe(minify({ noSource: true })) .pipe(minify({ noSource: true }))
.pipe(rename('mailymaily.min.js'))
.pipe(dest('./dist')); .pipe(dest('./dist'));
} }
function clean() { const clean = () => del([ './src/component.min.html', './src/css/' ]);
return del([ './src/html/component-min.html', './src/css/' ]); const prebuild = () => del([ './dist/' ]);
} exports.default = series(prebuild, html, css, js, clean);
exports.default = series(html, css, js, clean);

View File

@ -10,6 +10,6 @@
<body> <body>
<h1>mailymaily-sample</h1> <h1>mailymaily-sample</h1>
<a href="mailto:info@odit.services" target="_blank" rel="noopener noreferrer" class="mailymaily">info@odit.services</a> <a href="mailto:info@odit.services" target="_blank" rel="noopener noreferrer" class="mailymaily">info@odit.services</a>
<script src="./dist/mailymaily-min.js"></script> <script src="./dist/mailymaily.min.js"></script>
</body> </body>
</html> </html>