├── .gitignore ├── README.md ├── gulpfile.js ├── package.json └── src ├── fonts └── .gitignore ├── img └── .gitignore ├── index.html ├── js ├── main.js └── my.js ├── style ├── main.scss ├── my.scss └── variables.scss └── template ├── footer.html └── head.html /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.vscode 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Gulp start project - Окружение для разработки веб-проектов 2 | Готовое окружение для разработки фронтенд части сайта. 3 | 4 | ![Gulp start project](https://file.modx.pro/files/7/5/b/75b20cd2f756ca131ea048d6e6d865d4.png) 5 | 6 | ## Требования к окружению 7 | Для создания окружения необходимо иметь следующие установленные инструменты: 8 | - node.js 9 | - npm 10 | - git 11 | - gulp 12 | 13 | Если у вас данных инструментов нет, то их необходимо установить. 14 | 15 | ## Установка 16 | 17 | ### 1. Клонирование 18 | Скачайте файлы с github или клонируйте его c помощью команды: 19 | 20 | ```bash 21 | git clone https://github.com/alexsoin/gulp-start-project.git 22 | ``` 23 | 24 | ### 2. Установки зависимостей проекта 25 | Для установки зависимостей проекта необходимо в командной строке ввести команды: 26 | ```bash 27 | npm install 28 | ``` 29 | 30 | Если требуются дополнительные пакеты, то для их установки нужно выполнить команду: 31 | 32 | - Установка пакета, при этом информация о нём, автоматически прописывается в секцию "devDependencies" файла "package.json" *(такие пакеты как gulp-autoprefixer)* 33 | ```bash 34 | npm install название_пакета --save-dev 35 | ``` 36 | 37 | - Установка пакета, при этом информация о нём, автоматически прописывается в секцию "dependencies" файла "package.json" *(такие пакеты как bootstrap)* 38 | ```bash 39 | npm install название_пакета --save-prod 40 | ``` 41 | 42 | ## Как использовать окружение 43 | **Обычный режим**: 44 | - `gulp` - сборка и запуск live-server 45 | 46 | **Выборочная сборка**: 47 | - `gulp css:build` - для сборки CSS файлов 48 | - `gulp clean:build` - для очистки каталога `build` 49 | - `gulp html:build` - для сборки HTML файлов 50 | - `gulp js:build` - для сборки JS файлов 51 | - `gulp fonts:build` - для сборки шрифтов 52 | - `gulp image:build` - для сборки изображения 53 | 54 | ## Список инструментов 55 | 56 | Окружение, предназначенное для разработки фронтенд проекта, построено на базе следующих инструментов: 57 | 58 | - **Node.js** (среды, в которой будет выполняться окружение); 59 | - **npm** (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки Gulp, плагинов и фронтенд пакетов); 60 | - **jQuery, Popover, Bootstrap** (пакеты, которые будут использоваться для сборки css и js частей сайта); 61 | - **Gulp и его плагины** (будут использоваться для сборки проекта и выполнения других веб задач). 62 | 63 | ## Файловая структура Gulp проекта 64 | 65 | ### Корневая директория 66 | В корне проекта расположены папки: 67 | 68 | - `src` *(для исходных файлов)* внутри расположены каталоги: 69 | - `fonts` *(для шрифтов)*; 70 | - `img` *(для исходных изображений)*; 71 | - `js` *(для js-файлов)*; 72 | - `libs` *(для сторонних библиотек)*; 73 | - `style` *(для стилей)*; 74 | - `template` *(для HTML фрагментов)*; 75 | - файл `index.html`. 76 | - `build` *(для готовых файлов; будет создана после первой сборки; в эту папку их будет помещать сборщик Gulp)*; 77 | 78 | и файлы: `gulpfile.js`, `package.json`. Файл `gulpfile.js` содержит задачи для сборщика проекта Gulp. 79 | 80 | ### Директория js 81 | 82 | В директории `js` распологаются два файла: `main.js` и `my.js`. Файл `my.js` используется для написания своих скриптов, а 83 | `main.js` – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге `build`). 84 | 85 | ### Директория style 86 | 87 | Директория `style` отведена под стили. В данной директории находятся три файла: `main.scss` (содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), `my.scss` (используется для написания своих стилей) и `variables.scss` (содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных). 88 | 89 | ### Директория template и файл index.html 90 | 91 | Файл `index.html` - это главная страница создаваемого проекта. Кроме `index.html` в данную директорию можно поместить и другие html страницы. 92 | 93 | Директория `template` предназначена для помещения в неё фрагментов HTML страниц. Например, в данной директории можно создать файлы `head.html` и `footer.html`, и импортировать их содержимое (используя синтаксис `//= путь_к_файлу`) сразу в несколько страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах. 94 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* параметры для gulp-autoprefixer */ 4 | var autoprefixerList = [ 5 | 'Chrome >= 45', 6 | 'Firefox ESR', 7 | 'Edge >= 12', 8 | 'Explorer >= 10', 9 | 'iOS >= 9', 10 | 'Safari >= 9', 11 | 'Android >= 4.4', 12 | 'Opera >= 30' 13 | ]; 14 | 15 | /* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */ 16 | var path = { 17 | build: { 18 | html: 'build/', 19 | js: 'build/js/', 20 | css: 'build/css/', 21 | img: 'build/img/', 22 | fonts: 'build/fonts/', 23 | libs: 'build/libs/' 24 | }, 25 | src: { 26 | html: 'src/*.html', 27 | js: 'src/js/main.js', 28 | style: 'src/style/main.scss', 29 | img: 'src/img/**/*.*', 30 | fonts: 'src/fonts/**/*.*', 31 | libs: 'src/libs/**/*.*' 32 | }, 33 | watch: { 34 | html: 'src/**/*.html', 35 | js: 'src/js/**/*.js', 36 | css: 'src/style/**/*.scss', 37 | img: 'src/img/**/*.*', 38 | fonts: 'src/fonts/**/*.*', 39 | css_build: 'build/css/*.css', 40 | js_build: 'build/js/*.js' 41 | }, 42 | clean: './build/*' 43 | }; 44 | 45 | /* настройки сервера */ 46 | var config = { 47 | server: { 48 | baseDir: './build' 49 | }, 50 | notify: false, 51 | version: { 52 | value: '%MDS%', 53 | append: { 54 | key: 'v', 55 | to: ['css', 'js'], 56 | }, 57 | } 58 | }; 59 | 60 | /* подключаем gulp и плагины */ 61 | var gulp = require('gulp'), // подключаем Gulp 62 | webserver = require('browser-sync'), // сервер для работы и автоматического обновления страниц 63 | plumber = require('gulp-plumber'), // модуль для отслеживания ошибок 64 | rigger = require('gulp-rigger'), // модуль для импорта содержимого одного файла в другой 65 | sass = require('gulp-sass'), // модуль для компиляции SASS (SCSS) в CSS 66 | autoprefixer = require('gulp-autoprefixer'), // модуль для автоматической установки автопрефиксов 67 | cleanCSS = require('gulp-clean-css'), // плагин для минимизации CSS 68 | uglify = require('gulp-uglify-es').default, // модуль для минимизации JavaScript 69 | cache = require('gulp-cache'), // модуль для кэширования 70 | imagemin = require('gulp-imagemin'), // плагин для сжатия PNG, JPEG, GIF и SVG изображений 71 | jpegrecompress = require('imagemin-jpeg-recompress'), // плагин для сжатия jpeg 72 | pngquant = require('imagemin-pngquant'), // плагин для сжатия png 73 | rimraf = require('gulp-rimraf'), // плагин для удаления файлов и каталогов 74 | version = require('gulp-version-number'), // плагин для добавлении версий css и js файлов 75 | rename = require('gulp-rename'); 76 | 77 | /* задачи */ 78 | 79 | // запуск сервера 80 | gulp.task('webserver', function () { 81 | webserver(config); 82 | }); 83 | 84 | // сбор html 85 | gulp.task('html:build', function () { 86 | return gulp.src(path.src.html) // выбор всех html файлов по указанному пути 87 | .pipe(plumber()) // отслеживание ошибок 88 | .pipe(rigger()) // импорт вложений 89 | .pipe(version(config.version)) // добавление версий css и js 90 | .pipe(gulp.dest(path.build.html)) // выкладывание готовых файлов 91 | .pipe(webserver.reload({ stream: true })); // перезагрузка сервера 92 | }); 93 | 94 | // сбор стилей 95 | gulp.task('css:build', function () { 96 | return gulp.src(path.src.style) // получим main.scss 97 | .pipe(plumber()) // для отслеживания ошибок 98 | .pipe(sass()) // scss -> css 99 | .pipe(autoprefixer({ // добавим префиксы 100 | overrideBrowserslist: autoprefixerList 101 | })) 102 | .pipe(gulp.dest(path.build.css)) 103 | .pipe(rename({ suffix: '.min' })) 104 | .pipe(cleanCSS()) // минимизируем CSS 105 | .pipe(gulp.dest(path.build.css)) // выгружаем в build 106 | .pipe(webserver.reload({ stream: true })); // перезагрузим сервер 107 | }); 108 | 109 | // сбор js 110 | gulp.task('js:build', function () { 111 | return gulp.src(path.src.js) // получим файл main.js 112 | .pipe(plumber()) // для отслеживания ошибок 113 | .pipe(rigger()) // импортируем все указанные файлы в main.js 114 | .pipe(gulp.dest(path.build.js)) 115 | .pipe(rename({ suffix: '.min' })) 116 | .pipe(uglify()) // минимизируем js 117 | .pipe(gulp.dest(path.build.js)) // положим готовый файл 118 | .pipe(webserver.reload({ stream: true })); // перезагрузим сервер 119 | }); 120 | 121 | // перенос шрифтов 122 | gulp.task('fonts:build', function () { 123 | return gulp.src(path.src.fonts) 124 | .pipe(gulp.dest(path.build.fonts)); 125 | }); 126 | 127 | // обработка картинок 128 | gulp.task('image:build', function () { 129 | return gulp.src(path.src.img) // путь с исходниками картинок 130 | .pipe(cache(imagemin([ // сжатие изображений 131 | imagemin.gifsicle({ interlaced: true }), 132 | jpegrecompress({ 133 | progressive: true, 134 | max: 90, 135 | min: 80 136 | }), 137 | pngquant(), 138 | imagemin.svgo({ plugins: [{ removeViewBox: false }] }) 139 | ]))) 140 | .pipe(gulp.dest(path.build.img)); // выгрузка готовых файлов 141 | }); 142 | 143 | // перенос библиотек 144 | gulp.task('libs:build', function () { 145 | return gulp.src(path.src.libs) 146 | .pipe(gulp.dest(path.build.libs)); 147 | }); 148 | 149 | // удаление каталога build 150 | gulp.task('clean:build', function () { 151 | return gulp.src(path.clean, { read: false }) 152 | .pipe(rimraf()); 153 | }); 154 | 155 | // очистка кэша 156 | gulp.task('cache:clear', function () { 157 | cache.clearAll(); 158 | }); 159 | 160 | // сборка 161 | gulp.task('build', 162 | gulp.series('clean:build', 163 | gulp.parallel( 164 | 'html:build', 165 | 'css:build', 166 | 'js:build', 167 | 'fonts:build', 168 | 'image:build', 169 | 'libs:build' 170 | ) 171 | ) 172 | ); 173 | 174 | // запуск задач при изменении файлов 175 | gulp.task('watch', function () { 176 | gulp.watch(path.watch.html, gulp.series('html:build')); 177 | gulp.watch(path.watch.css, gulp.series('css:build')); 178 | gulp.watch(path.watch.js, gulp.series('js:build')); 179 | gulp.watch(path.watch.img, gulp.series('image:build')); 180 | gulp.watch(path.watch.fonts, gulp.series('fonts:build')); 181 | gulp.watch(path.watch.fonts, gulp.series('libs:build')); 182 | gulp.watch(path.watch.css_build).on('change', webserver.reload); 183 | gulp.watch(path.watch.js_build).on('change', webserver.reload); 184 | }); 185 | 186 | // задача по умолчанию 187 | gulp.task('default', gulp.series( 188 | 'build', 189 | gulp.parallel('webserver','watch') 190 | )); 191 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-start-project", 3 | "version": "1.0.1", 4 | "description": "Gulp start project - Окружение для разработки веб-проектов", 5 | "author": "alexsoin", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/alexsoin/gulp-start-projet.git" 10 | }, 11 | "dependencies": { 12 | "jquery": "^3.3.1", 13 | "popper.js": "^1.14.6", 14 | "bootstrap": "^4.2.1" 15 | }, 16 | "devDependencies": { 17 | "browser-sync": "^2.26.3", 18 | "gulp": "^4.0.0", 19 | "gulp-autoprefixer": "^6.0.0", 20 | "gulp-cache": "^1.0.2", 21 | "gulp-clean-css": "^4.0.0", 22 | "gulp-rimraf": "^0.2.2", 23 | "gulp-imagemin": "^5.0.3", 24 | "gulp-plumber": "^1.2.1", 25 | "gulp-rigger": "^0.5.8", 26 | "gulp-sass": "^4.0.2", 27 | "gulp-uglify-es": "^1.0.4", 28 | "gulp-version-number": "^0.2.3", 29 | "imagemin-jpeg-recompress": "^6.0.0", 30 | "imagemin-pngquant": "^6.0.1", 31 | "gulp-rename": "^1.4.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/fonts/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore -------------------------------------------------------------------------------- /src/img/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | //= template/head.html 5 | 6 | 7 | 8 |
9 |
10 |
11 |

Проект готов к работе!

12 |
13 |
14 |
15 | 16 | //= template/footer.html 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | // Импортируем jQuery 2 | //= ../../node_modules/jquery/dist/jquery.js 3 | 4 | // Импортируем Popper 5 | //= ../../node_modules/popper.js/dist/umd/popper.js 6 | 7 | // Импортируем необходимые js-файлы Bootstrap 4 8 | //= ../../node_modules/bootstrap/js/dist/util.js 9 | //= ../../node_modules/bootstrap/js/dist/alert.js 10 | //= ../../node_modules/bootstrap/js/dist/button.js 11 | //= ../../node_modules/bootstrap/js/dist/carousel.js 12 | //= ../../node_modules/bootstrap/js/dist/collapse.js 13 | //= ../../node_modules/bootstrap/js/dist/dropdown.js 14 | //= ../../node_modules/bootstrap/js/dist/modal.js 15 | //= ../../node_modules/bootstrap/js/dist/tooltip.js 16 | //= ../../node_modules/bootstrap/js/dist/popover.js 17 | //= ../../node_modules/bootstrap/js/dist/scrollspy.js 18 | //= ../../node_modules/bootstrap/js/dist/tab.js 19 | //= ../../node_modules/bootstrap/js/dist/toast.js 20 | 21 | // Импортируем другие js-файлы 22 | //= my.js -------------------------------------------------------------------------------- /src/js/my.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexsoin/gulp-start-project/2f0ccc7257affe5a1674f0eabad6fc59a2459e11/src/js/my.js -------------------------------------------------------------------------------- /src/style/main.scss: -------------------------------------------------------------------------------- 1 | // Переопределение дефолтных значений переменных Bootstrap 4 и определение своих 2 | @import "variables"; 3 | 4 | // Подключение нужных SCSS исходников Bootstrap 4 5 | @import "../../node_modules/bootstrap/scss/_functions"; 6 | @import "../../node_modules/bootstrap/scss/_variables"; 7 | @import "../../node_modules/bootstrap/scss/_mixins"; 8 | @import "../../node_modules/bootstrap/scss/_root"; 9 | @import "../../node_modules/bootstrap/scss/_reboot"; 10 | @import "../../node_modules/bootstrap/scss/_type"; 11 | @import "../../node_modules/bootstrap/scss/_images"; 12 | @import "../../node_modules/bootstrap/scss/_code"; 13 | @import "../../node_modules/bootstrap/scss/_grid"; 14 | @import "../../node_modules/bootstrap/scss/_tables"; 15 | @import "../../node_modules/bootstrap/scss/_forms"; 16 | @import "../../node_modules/bootstrap/scss/_buttons"; 17 | @import "../../node_modules/bootstrap/scss/_transitions"; 18 | @import "../../node_modules/bootstrap/scss/_dropdown"; 19 | @import "../../node_modules/bootstrap/scss/_button-group"; 20 | @import "../../node_modules/bootstrap/scss/_input-group"; 21 | @import "../../node_modules/bootstrap/scss/_custom-forms"; 22 | @import "../../node_modules/bootstrap/scss/_nav"; 23 | @import "../../node_modules/bootstrap/scss/_navbar"; 24 | @import "../../node_modules/bootstrap/scss/_card"; 25 | @import "../../node_modules/bootstrap/scss/_breadcrumb"; 26 | @import "../../node_modules/bootstrap/scss/_pagination"; 27 | @import "../../node_modules/bootstrap/scss/_badge"; 28 | @import "../../node_modules/bootstrap/scss/_jumbotron"; 29 | @import "../../node_modules/bootstrap/scss/_alert"; 30 | @import "../../node_modules/bootstrap/scss/_progress"; 31 | @import "../../node_modules/bootstrap/scss/_media"; 32 | @import "../../node_modules/bootstrap/scss/_list-group"; 33 | @import "../../node_modules/bootstrap/scss/_close"; 34 | @import "../../node_modules/bootstrap/scss/_toasts"; 35 | @import "../../node_modules/bootstrap/scss/_modal"; 36 | @import "../../node_modules/bootstrap/scss/_tooltip"; 37 | @import "../../node_modules/bootstrap/scss/_popover"; 38 | @import "../../node_modules/bootstrap/scss/_carousel"; 39 | @import "../../node_modules/bootstrap/scss/_spinners"; 40 | @import "../../node_modules/bootstrap/scss/_utilities"; 41 | @import "../../node_modules/bootstrap/scss/_print"; 42 | 43 | // Подключение своих SCSS файлов 44 | @import "my"; -------------------------------------------------------------------------------- /src/style/my.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexsoin/gulp-start-project/2f0ccc7257affe5a1674f0eabad6fc59a2459e11/src/style/my.scss -------------------------------------------------------------------------------- /src/style/variables.scss: -------------------------------------------------------------------------------- 1 | // Variables Bootstrap 4 2 | 3 | $red: #cc2eaa; 4 | $green: #2ecc71; 5 | 6 | -------------------------------------------------------------------------------- /src/template/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/template/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Home --------------------------------------------------------------------------------