Browse Source

proper naming conventions

master
Philipp Dormann 1 year ago
parent
commit
19528778a9
  1. 12
      README.md
  2. 1
      dist/mailymaily-min.js
  3. 1
      dist/mailymaily.min.js
  4. 22
      gulpfile.js
  5. 2
      index.html
  6. 0
      src/component.html
  7. 0
      src/mailymaily.js

12
README.md

@ -10,21 +10,21 @@ yarn && yarn build
[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
<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
```html
<script src="your/path/to/mailymaily-min.js" defer></script>
<script src="your/path/to/mailymaily.min.js" defer></script>
<!-- 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
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:
```html
<template>
@ -32,7 +32,7 @@ Link the dist file at the bottom of your layout, for example:
<Header />
<Nuxt />
<Footer />
<script src="/libs/mailymaily-min.js"></script>
<script src="/libs/mailymaily.min.js"></script>
</div>
</template>
```

1
dist/mailymaily-min.js

File diff suppressed because one or more lines are too long

1
dist/mailymaily.min.js

File diff suppressed because one or more lines are too long

22
gulpfile.js

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

2
index.html

@ -10,6 +10,6 @@
<body>
<h1>mailymaily-sample</h1>
<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>
</html>

0
src/html/component.html → src/component.html

0
src/js/mailymaily.js → src/mailymaily.js

Loading…
Cancel
Save