Guest User

Untitled

a guest
Jul 22nd, 2018
115
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.06 KB | None | 0 0
  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. /* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */
  15. var path = {
  16. vendor: {
  17. js: 'app/js/vendor/',
  18. css: 'app/css/vendor/'
  19. },
  20. dist: { //Тут мы укажем куда складывать готовые после сборки файлы
  21. html: 'dist/',
  22. php: 'dist/',
  23. js: 'dist/js/',
  24. scss: 'dist/css/',
  25. css: 'dist/css/',
  26. img: 'dist/img/',
  27. fonts: 'dist/fonts/'
  28. },
  29. app: { //Пути откуда брать исходники
  30. html: 'app/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
  31. php: 'app/*.php',
  32. js: 'app/js/*.js',//В стилях и скриптах нам понадобятся только main файлы
  33. scss: 'app/css/*.scss',
  34. css: 'app/css/*.css',
  35. img: 'app/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
  36. fonts: 'app/fonts/**/*.*'
  37. },
  38. watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
  39. html: 'app/**/*.html',
  40. php: 'app/**/*.php',
  41. js: 'app/js/**/*.js',
  42. scss: 'app/css/**/*.scss',
  43. css: 'app/css/**/*.css',
  44. img: 'app/img/**/*.*',
  45. fonts: 'app/fonts/**/*.*'
  46. },
  47. clean: './dist'
  48. };
  49. /* настройки сервера */
  50. var config = {
  51. proxy: "nadejda",
  52. files: ["**/*.php"],
  53. notify: false,
  54. tunnel: false,
  55. host: 'localhost',
  56. port: 8081,
  57. logPrefix: "VeterSM"
  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. sourcemaps = require('gulp-sourcemaps'), // модуль для генерации карты исходных файлов
  66. sass = require('gulp-sass'), // модуль для компиляции SASS (SCSS) в CSS
  67. autoprefixer = require('gulp-autoprefixer'), // модуль для автоматической установки автопрефиксов
  68. cleanCSS = require('gulp-clean-css'), // плагин для минимизации CSS
  69. uglify = require('gulp-uglify'), // модуль для минимизации JavaScript
  70. cache = require('gulp-cache'), // модуль для кэширования
  71. imagemin = require('gulp-imagemin'), // плагин для сжатия PNG, JPEG, GIF и SVG изображений
  72. jpegrecompress = require('imagemin-jpeg-recompress'), // плагин для сжатия jpeg
  73. pngquant = require('imagemin-pngquant'), // плагин для сжатия png
  74. del = require('del'), // плагин для удаления файлов и каталогов
  75. reload = webserver.reload;
  76.  
  77. /* задачи */
  78.  
  79. // запуск сервера
  80. gulp.task('webserver', function () {
  81. webserver(config);
  82. });
  83.  
  84. // сбор html
  85. gulp.task('html:build', function () {
  86. gulp.src(path.app.html) // выбор всех html файлов по указанному пути
  87. .pipe(plumber()) // отслеживание ошибок
  88. .pipe(rigger()) // импорт вложений
  89. .pipe(gulp.dest(path.dist.html)) // выкладывание готовых файлов
  90. .pipe(webserver.reload({stream: true})); // перезагрузка сервера
  91. });
  92. gulp.task('php:build', function () {
  93. gulp.src(path.app.php) // выбор всех html файлов по указанному пути
  94. .pipe(plumber()) // отслеживание ошибок
  95. .pipe(rigger()) // импорт вложений
  96. .pipe(gulp.dest(path.dist.php)) // выкладывание готовых файлов
  97. .pipe(webserver.reload({stream: true})); // перезагрузка сервера
  98. });
  99.  
  100. // сбор стилей
  101. gulp.task('scss:build', function () {
  102. gulp.src(path.app.scss) // получим main.scss
  103. .pipe(plumber()) // для отслеживания ошибок
  104. .pipe(sourcemaps.init()) // инициализируем sourcemap
  105. .pipe(sass()) // scss -> css
  106. .pipe(autoprefixer({ // добавим префиксы
  107. browsers: autoprefixerList
  108. }))
  109. .pipe(cleanCSS()) // минимизируем CSS
  110. .pipe(sourcemaps.write('./')) // записываем sourcemap
  111. .pipe(gulp.dest(path.dist.css)) // выгружаем в build
  112. .pipe(webserver.reload({stream: true})); // перезагрузим сервер
  113. });
  114.  
  115. gulp.task('css:build', function () {
  116. gulp.src(path.app.css) //Выберем наш main.css
  117. .pipe(sourcemaps.init()) //То же самое что и с js
  118. .pipe(cleanCSS()) //Сожмем
  119. .pipe(sourcemaps.write())
  120. .pipe(gulp.dest(path.dist.css)) //И в build
  121. .pipe(webserver.reload({stream: true}));
  122. });
  123.  
  124. // сбор js
  125. gulp.task('js:build', function () {
  126. gulp.src(path.app.js) // получим файл main.js
  127. .pipe(plumber()) // для отслеживания ошибок
  128. .pipe(rigger()) // импортируем все указанные файлы в main.js
  129. .pipe(sourcemaps.init()) //инициализируем sourcemap
  130. .pipe(uglify()) // минимизируем js
  131. .pipe(sourcemaps.write('./')) // записываем sourcemap
  132. .pipe(gulp.dest(path.dist.js)) // положим готовый файл
  133. .pipe(webserver.reload({stream: true})); // перезагрузим сервер
  134. });
  135.  
  136. // перенос шрифтов
  137. gulp.task('fonts:build', function() {
  138. gulp.src(path.app.fonts)
  139. .pipe(gulp.dest(path.dist.fonts));
  140. });
  141.  
  142. // обработка картинок
  143. gulp.task('image:build', function () {
  144. gulp.src(path.app.img) // путь с исходниками картинок
  145. .pipe(cache(imagemin([ // сжатие изображений
  146. imagemin.gifsicle({interlaced: true}),
  147. jpegrecompress({
  148. progressive: true,
  149. max: 90,
  150. min: 80
  151. }),
  152. pngquant(),
  153. imagemin.svgo({plugins: [{removeViewBox: false}],
  154. use: [pngquant()]})
  155. ])))
  156. .pipe(gulp.dest(path.dist.img)); // выгрузка готовых файлов
  157. });
  158.  
  159. // удаление каталога build
  160. gulp.task('clean:build', function () {
  161. del.sync(path.clean);
  162. });
  163.  
  164. // очистка кэша
  165. gulp.task('cache:clear', function () {
  166. cache.clearAll();
  167. });
  168.  
  169. // сборка
  170. gulp.task('build', [
  171. 'html:build',
  172. 'php:build',
  173. 'js:build',
  174. 'scss:build',
  175. 'css:build',
  176. 'fonts:build',
  177. 'image:build'
  178. ]);
  179.  
  180.  
  181. // запуск задач при изменении файлов
  182. gulp.task('watch', function() {
  183. gulp.watch(path.watch.html, ['html:build']);
  184. gulp.watch(path.watch.php, ['php:build']);
  185. gulp.watch(path.watch.scss, ['scss:build']);
  186. gulp.watch(path.watch.css, ['css:build']);
  187. gulp.watch(path.watch.js, ['js:build']);
  188. gulp.watch(path.watch.img, ['image:build']);
  189. gulp.watch(path.watch.fonts, ['fonts:build']);
  190. });
  191.  
  192.  
  193. gulp.task('webserver', function () {
  194. webserver(config);
  195. });
  196.  
  197.  
  198. // задача по умолчанию
  199. gulp.task('default', [
  200. 'clean:build',
  201. 'build',
  202. 'webserver',
  203. 'watch'
  204. ]);
Add Comment
Please, Sign In to add comment