Настройка gulp и плагина sass есть в статье как установить gulp.
Продолжаем установку основных плагинов.
Создадим таск, который будет собирать все js файлы в один и сжимать его.
Содержание статьи
Все js скрипты и css сжимаем и переносим в один файл
Для этого установим concat и uglify.
В командной строке пропишем npm i gulp-concat gulp-uglify –save-sev.
Подключаем в gulpfile.js.
Зададим им переменные.
Перейдем к таску скриптов.
Создаем новый таск с названием scripts и выполняем функцию.
В данной функции делаем возврат ее значения return из наскольких файлов, для этого используем массив, квадратные скобки, в котором укажем файлы.
Дальше создадим pipe, в котором мы конкатенируем в один. Затем сживаем файл uglify.
И выгружаем результат в директорию.
Для проверки выполним команду gulp scripts.
В результате появится файл scripts.min.js.
Подключаем один скрипт, который получается в index.html в самом низу.
Там же подключаем стили css одним файлом.
Чтобы видеть все изменения подключаем scripts к таску watch.
Теперь разберем как подключить css.
Создаем в папке sass, файл с названием libs.sass.
Внутри файла пропишем импорт import и и в скобочках указываем, что хотим импортировать.
После выполнения команды gulp sass появится файл libs.css.
Чтобы добавить суффикс min пропишем npm i gulp-rename –save-dev.
Для сжатия css используем clean css npm i gulp-cleancss –save-dev- .
Добавим переменную rename и cleancss и создадим таск sass.
Подключаем один файл стилей, который получается в index.html в самом низу.
Собираем проект в одну папку
Для получения готового результата создадим таск build.
Первым нам нужно из папки app и libs перенести в dist файлы стилей css.
Чтобы у нового таска было много функция мы задаем переменную buildcss и присвоим ей готовые файлы css.
И через pipe указываем куда выгрузим.
- Дальше перенесем таким же способом шрифты build fonts.
- Все js файлы.
- Последние перенесем html.
Перед тем как собирать папку dist нам нужно ее очистить.
Для этого подключим плагин del.
В командной строке пишем npm i del –save-dev.
Подключаем путем добавления новой переменной del и нового таска removedist.
Проверяем сборку командой gulp build.
Оптимизируем изображения
Следующая задача это автоматическая оптимизация изображений.
Для этого установим плагин npm I gulp-imagemin --savee-dev.
Зададим переменную и создадим таск.
После добавим imagemin в таск build.
Затем пробуем собрать проект build и проверяем размер картинок.
Если картинок будет очень много они будут обрабатываться долго.
Для этого к обработке картинок можно добавить cacsh, чтобы ускорить процесс.
Установим gulp-cacsh.
Переносим проект на хостинг
Последнее, что необходимо сделать это таск deploy, который перенесет наш проекта на хостинг.
- Пишем хост имя это наш домен.
- User и пароль пишем такие как при авторизации на хостинге.
Все выгружается в глобальную переменную, которое содержится в dist и .htaccess для правильной оптимизации сайта на хостинге.
Когда будем переносить файлы, то переименуем htaccess в файлзиле поставим точку вначале.
Подробное описание, что получилось
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
var gulp = require('gulp'), // Подключаем Gulp sass = require('gulp-sass'), //Подключаем Sass пакет browserSync = require('browser-sync'), // Подключаем Browser Sync concat = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов) uglify = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS) cssnano = require('gulp-cssnano'), // Подключаем пакет для минификации CSS rename = require('gulp-rename'), // Подключаем библиотеку для переименования файлов del = require('del'), // Подключаем библиотеку для удаления файлов и папок imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png cache = require('gulp-cache'), // Подключаем библиотеку кеширования autoprefixer = require('gulp-autoprefixer');// Подключаем библиотеку для автоматического добавления префиксов gulp.task('sass', function(){ // Создаем таск Sass return gulp.src('app/sass/**/*.sass') // Берем источник .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css .pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении }); gulp.task('browser-sync', function() { // Создаем таск browser-sync browserSync({ // Выполняем browserSync server: { // Определяем параметры сервера baseDir: 'app' // Директория для сервера - app }, notify: false // Отключаем уведомления }); }); gulp.task('scripts', function() { return gulp.src([ // Берем все необходимые библиотеки 'app/libs/jquery/dist/jquery.min.js', // Берем jQuery 'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js' // Берем Magnific Popup ]) .pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js .pipe(uglify()) // Сжимаем JS файл .pipe(gulp.dest('app/js')); // Выгружаем в папку app/js }); gulp.task('css-libs', ['sass'], function() { return gulp.src('app/css/libs.css') // Выбираем файл для минификации .pipe(cssnano()) // Сжимаем .pipe(rename({suffix: '.min'})) // Добавляем суффикс .min .pipe(gulp.dest('app/css')); // Выгружаем в папку app/css }); gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() { gulp.watch('app/sass/**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта gulp.watch('app/js/**/*.js', browserSync.reload); // Наблюдение за JS файлами в папке js }); gulp.task('clean', function() { return del.sync('dist'); // Удаляем папку dist перед сборкой }); gulp.task('img', function() { return gulp.src('app/img/**/*') // Берем все изображения из app .pipe(cache(imagemin({ // Сжимаем их с наилучшими настройками с учетом кеширования interlaced: true, progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] }))) .pipe(gulp.dest('dist/img')); // Выгружаем на продакшен }); gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function() { var buildCss = gulp.src([ // Переносим библиотеки в продакшен 'app/css/main.css', 'app/css/libs.min.css' ]) .pipe(gulp.dest('dist/css')) var buildFonts = gulp.src('app/fonts/**/*') // Переносим шрифты в продакшен .pipe(gulp.dest('dist/fonts')) var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен .pipe(gulp.dest('dist/js')) var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен .pipe(gulp.dest('dist')); }); gulp.task('clear', function (callback) { return cache.clearAll(); }) gulp.task('default', ['watch']); |