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