├── .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 |
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 |
--------------------------------------------------------------------------------