Skip to content

Commit bcf8f4e

Browse files
ArhellArhell
authored
update gulp template (#13)
1 parent aa77d76 commit bcf8f4e

32 files changed

+245
-197
lines changed

‎.github/workflows/setup.yml

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Frontend templates
2+
3+
## Gulp
4+
5+
`cd gulp` - go to the desired folder
6+
7+
`npm i` - initialization
8+
9+
`npm run start` - start template
10+
11+
`npm run build` - build template

‎.gitignore renamed to ‎gulp/.gitignore

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/node_modules/
2+
node_modules/
23
/.git/
3-
/.idea/
44
/**/Thumbs.db
55
/**/*.DS_Store
66
package-lock.json
7-
/dist/
7+
yarn.lock
8+
debug.log

‎gulp/gulpfile.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const { parallel, series } = require('gulp')
2+
3+
// Tasks
4+
const browserSync = require("./tasks/browsersync")
5+
const buildCopy = require("./tasks/buildcopy")
6+
const buildHtml = require("./tasks/buildhtml")
7+
const cleanDist = require("./tasks/cleandist")
8+
const images = require("./tasks/images")
9+
const scripts = require("./tasks/scripts")
10+
const styles = require("./tasks/styles")
11+
const serve = require("./tasks/serve")
12+
13+
exports.build = series(cleanDist, scripts, styles, images, buildCopy, buildHtml)
14+
exports.default = series(scripts, styles, images, parallel(browserSync, serve))

‎gulp/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "frontend-template",
3+
"version": "1.0.0",
4+
"description": "gulp template for quit start",
5+
"main": "index.js",
6+
"author": "Arhell",
7+
"license": "ISC",
8+
"scripts": {
9+
"start": "gulp",
10+
"build": "gulp build"
11+
},
12+
"devDependencies": {
13+
"@babel/core": "^7.15.0",
14+
"@babel/preset-env": "^7.15.0",
15+
"babel-loader": "^8.2.2",
16+
"babel-plugin-module-resolver": "^4.1.0",
17+
"babel-plugin-root-import": "^6.6.0",
18+
"browser-sync": "^2.27.5",
19+
"browsersync-ssi": "^0.2.4",
20+
"del": "^6.0.0",
21+
"gulp": "^4.0.2",
22+
"gulp-autoprefixer": "^8.0.0",
23+
"gulp-clean-css": "^4.3.0",
24+
"gulp-imagemin": "^7.1.0",
25+
"gulp-newer": "^1.4.0",
26+
"gulp-noop": "^1.0.1",
27+
"gulp-rename": "^2.0.0",
28+
"gulp-sass": "^5.0.0",
29+
"gulp-sass-glob": "^1.1.0",
30+
"sass": "^1.37.5",
31+
"webpack-stream": "^6.1.2"
32+
}
33+
}

‎gulp/path/tasks.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎gulp/src/fonts/roboto-bold-webfont.woff2

19.6 KB
Binary file not shown.

‎gulp/src/fonts/roboto-regular-webfont.woff2

18.8 KB
Binary file not shown.

‎gulp/src/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="utf-8">
7+
<title>Title</title>
8+
<meta name="description" content="Description">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
10+
<link rel="icon" href="images/favicon.png">
11+
<link rel="stylesheet" href="css/style.min.css">
12+
13+
</head>
14+
15+
<body>
16+
17+
<h1>Hello world</h1>
18+
19+
<script src="js/js.min.js"></script>
20+
21+
</body>
22+
</html>

‎gulp/src/js/js.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
3+
// custom
4+
5+
})

‎gulp/src/styles/style.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@mixin font-face($font-name, $path, $weight: normal, $style: normal) {
2+
@font-face {
3+
font-family: quote($font-name);
4+
src:
5+
url(#{$path}.woff2) format("woff2");
6+
font-weight: $weight;
7+
font-style: $style;
8+
}
9+
}
10+
@include font-face('Roboto', '../fonts/roboto-regular-webfont', 400, 'normal');
11+
@include font-face('Roboto', '../fonts/roboto-bold-webfont', 700, 'normal');
12+
13+
*,
14+
*::before,
15+
*::after {
16+
box-sizing: border-box;
17+
}
18+
19+
body {
20+
margin: 0;
21+
font-family: 'Roboto', sans-serif;
22+
}

‎gulp/tasks/browser-sync.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎gulp/tasks/browsersync.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const bssi = require("browsersync-ssi");
2+
const browserSync = require('browser-sync')
3+
4+
module.exports = function browserync() {
5+
browserSync.init({
6+
server: {
7+
baseDir: 'src/',
8+
middleware: bssi(
9+
{
10+
baseDir: 'src/',
11+
ext: '.html'
12+
}
13+
)
14+
},
15+
ghostMode: { clicks: false },
16+
notify: false,
17+
online: true,
18+
})
19+
}

‎gulp/tasks/buildcopy.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const {src, dest} = require("gulp");
2+
3+
module.exports = function buildCopy() {
4+
return src([
5+
'{src/js,src/css}/*.min.*',
6+
'src/images/**/*.*',
7+
'!src/images/src/**/*',
8+
'src/fonts/**/*'
9+
], { base: 'src/' })
10+
.pipe(dest('dist'))
11+
}

‎gulp/tasks/buildhtml.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const del = require("del");
2+
const ssi = require('ssi')
3+
4+
module.exports = async function buildHtml() {
5+
const includes = new ssi('src/', 'dist/', '/**/*.html')
6+
includes.compile()
7+
del('dist/parts', { force: true })
8+
}

‎gulp/tasks/cleandist.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const del = require("del");
2+
3+
module.exports = function cleanDist() {
4+
return del('dist/**/*', { force: true })
5+
}

‎gulp/tasks/images.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const {src, dest} = require("gulp");
2+
const newer = require("gulp-newer");
3+
const imagemin = require("gulp-imagemin");
4+
const browserSync = require('browser-sync')
5+
6+
module.exports = function images() {
7+
return src(['src/images/src/**/*'])
8+
.pipe(newer('src/images/dist'))
9+
.pipe(imagemin([
10+
imagemin.gifsicle({interlaced: true}),
11+
imagemin.mozjpeg({quality: 75, progressive: true}),
12+
imagemin.optipng({optimizationLevel: 5}),
13+
imagemin.svgo({
14+
plugins: [
15+
{removeViewBox: false},
16+
{cleanupIDs: true}
17+
]
18+
})
19+
]))
20+
.pipe(dest('src/images/dist'))
21+
.pipe(browserSync.stream())
22+
}

‎gulp/tasks/img.js

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎gulp/tasks/pug.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎gulp/tasks/scripts.js

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
1-
module.exports = function () {
2-
$.gulp.task('scripts', function () {
3-
return $.gulp.src([
4-
'src/js/libs.js',
5-
'src/js/custom.js'
6-
])
7-
.pipe($.glp.concat('scripts.min.js'))
8-
.pipe($.gulp.dest('dist/js'))
9-
.pipe($.bs.reload({
10-
stream: true
11-
}));
12-
});
13-
};
1+
const {src, dest} = require("gulp");
2+
const webpack = require("webpack-stream");
3+
const rename = require("gulp-rename");
4+
const browserSync = require('browser-sync')
5+
6+
module.exports = function scripts() {
7+
return src(['src/js/*.js', '!src/js/*.min.js'])
8+
.pipe(webpack({
9+
mode: 'production',
10+
performance: { hints: false },
11+
module: {
12+
rules: [
13+
{
14+
test: /\.(js)$/,
15+
exclude: /(node_modules)/,
16+
loader: 'babel-loader',
17+
query: {
18+
presets: ['@babel/env'],
19+
plugins: ['babel-plugin-root-import']
20+
}
21+
}
22+
]
23+
}
24+
})).on('error', function handleError() {
25+
this.emit('end')
26+
})
27+
.pipe(rename('js.min.js'))
28+
.pipe(dest('src/js'))
29+
.pipe(browserSync.stream())
30+
}

‎gulp/tasks/serve.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const filesWatch = 'html,htm,txt,json,md,woff2'
2+
3+
const { watch } = require('gulp')
4+
5+
const scripts = require("./scripts")
6+
const styles = require("./styles")
7+
const images = require("./images")
8+
const browserSync = require('browser-sync')
9+
10+
module.exports = function serve() {
11+
watch('src/styles/**/*', { usePolling: true }, styles)
12+
watch(['src/js/**/*.js', '!src/js/**/*.min.js'], { usePolling: true }, scripts)
13+
watch('src/images/src/**/*.{jpg,jpeg,png,webp,svg,gif}', { usePolling: true }, images)
14+
watch(`src/**/*.{${filesWatch}}`, { usePolling: true }).on('change', browserSync.reload)
15+
}

‎gulp/tasks/styles.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const {src, dest} = require("gulp");
2+
const autoprefixer = require("gulp-autoprefixer");
3+
const cleanCss = require("gulp-clean-css");
4+
const rename = require("gulp-rename");
5+
const browserSync = require('browser-sync')
6+
const sassGlob = require('gulp-sass-glob')
7+
const sass = require('gulp-sass')(require('sass'))
8+
9+
module.exports = function styles() {
10+
return src(['src/styles/*.*', '!src/styles/_*.*'])
11+
.pipe(eval(sassGlob)())
12+
.pipe(eval(sass)())
13+
.pipe(autoprefixer({
14+
overrideBrowserslist: ['last 10 versions'],
15+
grid: true
16+
}))
17+
.pipe(cleanCss({
18+
level: {
19+
1: { specialComments: 0 }},
20+
// format: 'beautify'
21+
}))
22+
.pipe(rename({ suffix: ".min" }))
23+
.pipe(dest('src/css'))
24+
.pipe(browserSync.stream())
25+
}

‎gulp/tasks/stylus.js

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎gulp/tasks/watch.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)