andrew-ml · N1kitchenko · May 30, 2019 · May 30, 2019 · May 31, 2019 · Jun 3, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/Oleg/Glossy button/.gitignore b/Oleg/Glossy button/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+css/*.css
diff --git a/Oleg/Glossy button/gulpfile.js b/Oleg/Glossy button/gulpfile.js
@@ -0,0 +1,65 @@
+/***** 
+*
+* Install first this modules as devDependencies
+* 
+*  npm install browser-sync gulp gulp-autoprefixer gulp-connect gulp-load-plugins gulp-sass --save-dev
+*  
+******/
+
+var gulp    = require('gulp'),
+    $       = require('gulp-load-plugins')(),
+    connect = require('gulp-connect'),
+    browserSync = require('browser-sync').create();
+
+var sassPaths = [
+  'src/sass'
+];
+
+gulp.task('webserver', function() {
+  connect.server({
+    livereload: true,
+    port: 3002,
+    host: '0.0.0.0'
+  });
+});
+
+// Static server
+gulp.task('browser-sync', function() {
+    browserSync.init({
+        server: {
+            baseDir: "./"
+        }
+    });
+});
+
+gulp.task('html', function () {
+  gulp.src('*.html')
+    .pipe(connect.reload());
+});
+
+gulp.task('js', function () {
+  gulp.src('*.js')
+    .pipe(connect.reload());
+});
+
+gulp.task('sass', function() {
+  return gulp.src('src/sass/style.scss')
+    .pipe($.sass({
+      includePaths: sassPaths
+    })
+      .on('error', $.sass.logError))
+    .pipe($.autoprefixer({
+      browsers: ['last 2 versions', 'ie >= 9']
+    }))
+    .pipe(gulp.dest('./css'))
+    .pipe(connect.reload());
+});
+
+gulp.task('watch', ['sass','html', 'js'], function() {
+  gulp.watch(['*.html'], ['html']);
+  gulp.watch(['src/**/*.html'], ['html']);
+  gulp.watch(['src/sass/**/*.scss'], ['sass']);
+  gulp.watch(['src/js/**/*.js'], ['js']);
+});
+
+gulp.task('default', ['sass', 'webserver', 'watch']);
diff --git a/Oleg/Glossy button/index.html b/Oleg/Glossy button/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="description" content="HTML tutorial website" />
+  <meta name="keywords" content="HTML,CSS,JavaScript" />
+  <title>HTML tutorial web page</title>
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+
+<body>
+  <button>Settings</button>
+</body>
+
+</html>