├── .gitignore ├── README.md ├── gulpfile.js ├── index.html ├── package.json └── src ├── css ├── main.css └── media.css └── js ├── lib.js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Сборка проекта на Gulp 4, Версия 1 2 | 3 | ## Описание проекта: 4 | С помощью этих файлов вы сможете быстро настроить сборку вашего проекта на Gulp. 5 | 6 | ## Структура файлов и папок: 7 | >./src 8 | >> /css 9 | >>> /main.css 10 | >>> /media.css 11 | >> /js 12 | >>> /lib.js 13 | >>> /main.js 14 | >./gulpfile.js 15 | >./package.json 16 | >./index.html 17 | 18 | ## Инструкция: 19 | 1. Скачать все файлы в любую директорию 20 | 2. Ввести в терминале/командной строке команду: npm i (должен быть установлен node.js) 21 | 3. Выполнить команду: gulp dev (запуск таска dev, который очистит каталог build и запустит таск watch - отслеживает изменения в файлах html, css и js) 22 | 4. Писать свой код и наслаждаться автоматической сборкой проекта. 23 | 24 | --- 25 | 26 | [![GitHub](https://img.shields.io/badge/-Мой_GitHub-333?style=for-the-badge&logo=GitHub&logoColor=fff)](https://github.com/morphIsmail) -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | //Подключаем модули галпа 2 | const gulp = require('gulp'); 3 | const concat = require('gulp-concat'); 4 | const autoprefixer = require('gulp-autoprefixer'); 5 | const cleanCSS = require('gulp-clean-css'); 6 | const uglify = require('gulp-uglify'); 7 | const del = require('del'); 8 | const browserSync = require('browser-sync').create(); 9 | 10 | //Порядок подключения css файлов 11 | const cssFiles = [ 12 | './src/css/main.css', 13 | './src/css/media.css' 14 | ] 15 | //Порядок подключения js файлов 16 | const jsFiles = [ 17 | './src/js/lib.js', 18 | './src/js/main.js' 19 | ] 20 | 21 | //Таск на стили CSS 22 | function styles() { 23 | //Шаблон для поиска файлов CSS 24 | //Всей файлы по шаблону './src/css/**/*.css' 25 | return gulp.src(cssFiles) 26 | //Объединение файлов в один 27 | .pipe(concat('style.css')) 28 | //Добавить префиксы 29 | .pipe(autoprefixer({ 30 | cascade: false 31 | })) 32 | //Минификация CSS 33 | .pipe(cleanCSS({ 34 | level: 2 35 | })) 36 | //Выходная папка для стилей 37 | .pipe(gulp.dest('./build/css')) 38 | .pipe(browserSync.stream()); 39 | } 40 | 41 | //Таск на скрипты JS 42 | function scripts() { 43 | //Шаблон для поиска файлов JS 44 | //Всей файлы по шаблону './src/js/**/*.js' 45 | return gulp.src(jsFiles) 46 | //Объединение файлов в один 47 | .pipe(concat('script.js')) 48 | //Минификация JS 49 | .pipe(uglify({ 50 | toplevel: true 51 | })) 52 | //Выходная папка для скриптов 53 | .pipe(gulp.dest('./build/js')) 54 | .pipe(browserSync.stream()); 55 | } 56 | 57 | //Удалить всё в указанной папке 58 | function clean() { 59 | return del(['build/*']) 60 | } 61 | 62 | //Просматривать файлы 63 | function watch() { 64 | browserSync.init({ 65 | server: { 66 | baseDir: "./" 67 | } 68 | }); 69 | //Следить за CSS файлами 70 | gulp.watch('./src/css/**/*.css', styles) 71 | //Следить за JS файлами 72 | gulp.watch('./src/js/**/*.js', scripts) 73 | //При изменении HTML запустить синхронизацию 74 | gulp.watch("./*.html").on('change', browserSync.reload); 75 | } 76 | 77 | //Таск вызывающий функцию styles 78 | gulp.task('styles', styles); 79 | //Таск вызывающий функцию scripts 80 | gulp.task('scripts', scripts); 81 | //Таск для очистки папки build 82 | gulp.task('del', clean); 83 | //Таск для отслеживания изменений 84 | gulp.task('watch', watch); 85 | //Таск для удаления файлов в папке build и запуск styles и scripts 86 | gulp.task('build', gulp.series(clean, gulp.parallel(styles,scripts))); 87 | //Таск запускает таск build и watch последовательно 88 | gulp.task('dev', gulp.series('build','watch')); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repudiandae officia quod voluptas nobis minus hic, totam animi! Nisi eveniet voluptas facere consequuntur velit, eius deserunt quae. Delectus, laudantium quis.

12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulpLesson", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "del": "^3.0.0" 8 | }, 9 | "devDependencies": { 10 | "browser-sync": "^2.26.3", 11 | "gulp": "^4.0.0", 12 | "gulp-autoprefixer": "^6.0.0", 13 | "gulp-clean-css": "^4.0.0", 14 | "gulp-concat": "^2.6.1", 15 | "gulp-uglify": "^3.0.1" 16 | }, 17 | "scripts": { 18 | "test": "echo \"Error: no test specified\" && exit 1" 19 | }, 20 | "keywords": [], 21 | "author": "", 22 | "license": "ISC" 23 | } 24 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morphIsmail/gulp_settings/27a07102b3022b7fff9ad89240b1e454a10cc5ea/src/css/main.css -------------------------------------------------------------------------------- /src/css/media.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: purple; 3 | } 4 | p { 5 | color: white 6 | } -------------------------------------------------------------------------------- /src/js/lib.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morphIsmail/gulp_settings/27a07102b3022b7fff9ad89240b1e454a10cc5ea/src/js/lib.js -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morphIsmail/gulp_settings/27a07102b3022b7fff9ad89240b1e454a10cc5ea/src/js/main.js --------------------------------------------------------------------------------