├── .gitignore ├── README.md ├── css └── style.css ├── gulpfile.js ├── index.html ├── index.js ├── package-lock.json ├── package.json └── scss └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulp_vanila_project 2 | ## This is a default project for using a gulp every setting ready to work 3 | 4 | 5 | 1. You have to just clone this repository then > cd gulp_vanila_project 6 | 2. If you using gulp first time You have to install it global > npm install --global gulp-cli 7 | 3. On the terminal write this **npm install** 8 | 4. On the terminal write **gulp** to start 9 | 5. If everythink is ok **Just click the star on this repo** 10 | 11 | 12 | # Telegram 13 | [@ravshanov021](https://t.me/ravshanov021) 14 | 15 | # Instagram 16 | [daler.sharifkulov](https://www.instagram.com/daler.sharifkulov/) 17 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *{padding:0;margin:0;box-sizing:border-box}body{background-color:red}header{width:100%;padding:20px;display:flex;justify-content:space-between;align-items:center;background-color:#c4c4c4}header .left{display:flex;align-items:center;gap:15px}header .left a{text-decoration:none;color:#000}header .right{display:flex;align-items:center;gap:15px}header .right .round{width:38px;height:38px;background-color:gray}header .right .round:hover{background-color:orange} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const autoprefixer = require("gulp-autoprefixer"); // prefixex 3 | const cleanCSS = require("gulp-clean-css"); // minify css 4 | const concat = require("gulp-concat"); // unit files 5 | const sass = require("gulp-sass")(require("sass")); // scss sass 6 | 7 | // sources 8 | const paths = { 9 | styles: { 10 | src: { 11 | custom: "./scss/**.scss", 12 | }, 13 | dist: "./css", 14 | }, 15 | }; 16 | 17 | sass.compiler = require("node-sass"); 18 | 19 | // styles custom optimize 20 | function CustomStyles() { 21 | return gulp 22 | .src(paths.styles.src.custom) 23 | .pipe(sass().on("error", sass.logError)) 24 | .pipe(concat("style.css")) 25 | .pipe(autoprefixer({ overrideBrowserslist: ["> 1%"], cascade: false })) 26 | .pipe(cleanCSS({ level: 2 })) 27 | .pipe(gulp.dest(paths.styles.dist)); 28 | } 29 | 30 | // watchin' onchange 31 | function watch() { 32 | gulp.watch(paths.styles.src.custom, CustomStyles); 33 | } 34 | 35 | gulp.task("styles", CustomStyles); 36 | gulp.task("watch", watch); 37 | 38 | gulp.task("build", gulp.parallel(CustomStyles)); 39 | gulp.task("default", gulp.series("build", "watch")); 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 |
14 |

logo

15 | Home 16 | About us 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daler-web-dev/gulp_vanila_project/8429a3a6a8d4cd9c359d63c2f7fda1cc4f49b41f/index.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "708", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "gulp": "^4.0.2", 13 | "gulp-autoprefixer": "^8.0.0", 14 | "gulp-clean-css": "^4.3.0", 15 | "gulp-concat": "^2.6.1", 16 | "gulp-sass": "^5.1.0", 17 | "node-sass": "^7.0.3", 18 | "sass": "^1.55.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0px; 3 | margin: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: red; 9 | } 10 | 11 | header { 12 | width: 100%; 13 | padding: 20px; 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | background-color: #c4c4c4; 18 | 19 | .left { 20 | display: flex; 21 | align-items: center; 22 | gap: 15px; 23 | a { 24 | text-decoration: none; 25 | color: black; 26 | } 27 | } 28 | .right { 29 | display: flex; 30 | align-items: center; 31 | gap: 15px; 32 | .round { 33 | width: 38px; 34 | height: 38px; 35 | background-color: gray; 36 | &:hover { 37 | background-color: orange; 38 | } 39 | } 40 | } 41 | } 42 | --------------------------------------------------------------------------------