feat(project): добавил сборку gulp

Author: arloktev

.browserslistrc

@@ -0,0 +1,3 @@
+last 2 versions
+not dead
+not IE 11

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,15 @@
+# Файлы и папки операционной системы
+.DS_Store
+Thumbs.db
+
+# Файлы редактора
+.idea
+.vscode
+
+# Вспомогательные файлы
+node_modules
+
+# Папка с собранными файлами проекта
+dist
+
+

gulp/paths.js

@@ -0,0 +1,44 @@
+const paths = {
+  views: {
+    src: './src/views/pages/*.pug',
+    dist: './dist/',
+    watch: [
+      './src/views/**/*.pug',
+      './src/components/**/*.pug',
+    ],
+  },
+  styles: {
+    src: './src/styles/main.{scss,sass}',
+    dist: './dist/assets/styles/',
+    watch: [
+      './src/components/**/*.{scss,sass}',
+      './src/styles/**/*.{scss,sass}'
+    ]
+  },
+  scripts: {
+    src: './src/js/index.js',
+    dist: './dist/assets/js/',
+    watch: [
+      './src/components/**/*.js'
+    ]
+  },
+  images: {
+    src: [
+      './src/assets/images/**/*.{jpg,jpeg,png,gif,svg}',
+    ],
+    dist: './dist/assets/images/',
+    watch: './src/assets/images/**/*.{jpg,jpeg,png,gif,svg}'
+  },
+  fonts: {
+    src: './src/assets/fonts/**/*.{ttf,woff,woff2}',
+    dist: './dist/assets/fonts/',
+    watch: './src/assets/fonts/**/*.{ttf,woff,woff2}'
+  },
+  sprites: {
+    src: './src/sprite/**/*.svg',
+    dist: './dist/assets/images/',
+    watch: './src/sprite/**/*.svg'
+  }
+};
+
+module.exports = paths;

gulp/tasks/clean.js

@@ -0,0 +1,7 @@
+const del = require('del');
+
+const clean = () => {
+  return del('dist')
+}
+
+module.exports = clean;

gulp/tasks/fonts.js

@@ -0,0 +1,14 @@
+const { src, dest } = require('gulp');
+const browserSync = require('browser-sync');
+
+const paths = require('../paths');
+
+const fonts = () => {
+  return (
+    src(paths.fonts.src)
+      .pipe(dest(paths.fonts.dist))
+      .pipe(browserSync.stream())
+  )
+}
+
+module.exports = fonts;

gulp/tasks/images.js

@@ -0,0 +1,19 @@
+const { src, dest } = require('gulp');
+const gulpIf = require('gulp-if');
+const imagemin = require('gulp-imagemin');
+const browserSync = require('browser-sync');
+
+const paths = require('../paths');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const images = () => {
+  return (
+    src(paths.images.src)
+      .pipe(gulpIf(isProduction, imagemin()))
+      .pipe(dest(paths.images.dist))
+      .pipe(browserSync.stream())
+  )
+}
+
+module.exports = images;

gulp/tasks/server.js

@@ -0,0 +1,24 @@
+const browserSync = require('browser-sync');
+const { watch } = require('gulp');
+
+const styles = require('./styles');
+const fonts = require('./fonts');
+const views = require('./views');
+const svgSprite = require('./svgSprite');
+const images = require('./images');
+
+const paths = require('../paths');
+
+const server = () => {
+  browserSync.init({
+    server: 'dist/',
+  })
+
+  watch(paths.styles.watch, styles);
+  watch(paths.fonts.watch, fonts);
+  watch(paths.views.watch, views);
+  watch(paths.sprites.watch, svgSprite);
+  watch(paths.images.watch, images);
+}
+
+module.exports = server;

gulp/tasks/styles.js

@@ -0,0 +1,31 @@
+const { src, dest } = require('gulp');
+const postcss = require('gulp-postcss')
+const autoprefixer = require('autoprefixer');
+const browserSync = require('browser-sync');
+const sourcemaps = require('gulp-sourcemaps');
+const plumber = require('gulp-plumber');
+const gulpIf = require('gulp-if');
+const sass = require('gulp-sass')(require('sass'));
+
+const paths = require('../paths');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const styles = () => {
+  return (
+    src(paths.styles.src)
+      .pipe(plumber())
+      .pipe(gulpIf(!isProduction, sourcemaps.init()))
+      .pipe(sass())
+      .pipe(postcss(
+        [
+          autoprefixer()
+        ]
+      ))
+      .pipe(gulpIf(!isProduction, sourcemaps.write('.')))
+      .pipe(dest(paths.styles.dist))
+      .pipe(browserSync.stream())
+  )
+}
+
+module.exports = styles;

gulp/tasks/svgSprite.js

@@ -0,0 +1,19 @@
+const { src, dest } = require('gulp');
+const gulpSvgSprite = require('gulp-svg-sprite');
+const browserSync = require('browser-sync');
+const plumber = require('gulp-plumber');
+
+const paths = require('../paths');
+
+const svgSprite = () => {
+  return src(paths.sprites.src)
+    .pipe(plumber())
+    .pipe(gulpSvgSprite({
+      mode: 'symbols',
+      preview: false
+    }))
+    .pipe(dest(paths.sprites.dist))
+    .pipe(browserSync.stream());
+}
+
+module.exports = svgSprite;

gulp/tasks/views.js

@@ -0,0 +1,18 @@
+const { src, dest } = require('gulp');
+const plumber = require('gulp-plumber');
+const pug = require('gulp-pug');
+const browserSync = require('browser-sync');
+
+const paths = require('../paths');
+
+const views = () => {
+  return src(paths.views.src)
+    .pipe(plumber())
+    .pipe(pug({
+      pretty: true
+    }))
+    .pipe(dest(paths.views.dist))
+    .pipe(browserSync.stream())
+}
+
+module.exports = views;

gulpfile.js

@@ -0,0 +1,15 @@
+const { parallel, series } = require('gulp');
+
+const views = require('./gulp/tasks/views');
+const clean = require('./gulp/tasks/clean');
+const server = require('./gulp/tasks/server');
+const styles = require('./gulp/tasks/styles');
+const images = require('./gulp/tasks/images');
+const fonts = require('./gulp/tasks/fonts');
+const svgSprite = require('./gulp/tasks/svgSprite');
+
+const build = series(clean, parallel(views, styles, fonts, images, svgSprite));
+const dev = series(build, server);
+
+module.exports.start = dev
+module.exports.build = build