var gulp = require('gulp'), // Подключаем Gulp
less = require('gulp-less'), //Подключаем less пакет,
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');// Подключаем библиотеку для автоматического добавления префиксов npm install gulp-uglifyjs --save-dev
var csso = require('gulp-csso'),
rigger = require('gulp-rigger'); //плагин позволяет хранить статичные части сайта, такие как header, footer, aside
gulp.task('less', function(){ // Создаем таск Less
return gulp.src('app/less/**/*.less') // Берем источник
.pipe(less()) // Преобразуем Less в CSS посредством gulp-less
.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/jquery-3.2.1.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', ['less'], 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/less/**/*.less', ['less']); // Наблюдение за less файлами в папке less
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', 'less', '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']);
{
"name": "projectgulp",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"browser-sync": "^2.18.12",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-exit": "^0.0.2",
"gulp-grep": "^0.2.0",
"gulp-html-replace": "^1.6.2",
"gulp-imagemin": "^3.3.0",
"gulp-jsonminify": "^1.0.0",
"gulp-less": "^3.3.2",
"gulp-minify-css": "^1.2.4",
"gulp-ng-annotate": "^2.0.0",
"gulp-order": "^1.1.1",
"gulp-protractor": "^4.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglifyjs": "^0.6.2",
"gulp-uglify": "^3.0.0",
"gulp-using": "^0.1.1",
"karma": "^1.7.0",
"merge-stream": "^1.0.1"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-csso": "^3.0.0",
"gulp-jshint": "^2.0.4",
"gulp-plumber": "^1.1.0",
"gulp-rigger": "^0.5.8",
"gulp-spritesmith": "0.0.2",
"gulp-watch": "^4.3.11"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/.."
},
"author": "...",
"license": "ISC",
"bugs": {
"url": "https://github.com/.."
},
"homepage": "https://github.com/...",
"description": ""
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//= include/header.html
<section class="content">
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которой над взобравшись дорогу рыбными свой деревни, парадигматическая она сбить даль щеке! Прямо мир агенство о предложения буквенных реторический это.
<p><img src="img/1.jpg" alt="Alt"></p>
<p><img src="img/2.jpg" alt="Alt"></p>
<p><img src="img/3.jpg" alt="Alt"></p>
</section>
//= include/footer.html
<script src="js/libs.min.js"></script>
</body>
</html>
C:\OpenServer\domains\localhost\projectgulp>gulp
[16:54:39] Using gulpfile C:\OpenServer\domains\localhost\projectgulp\gulpfile.js
[16:54:39] Starting 'browser-sync'...
[16:54:39] Finished 'browser-sync' after 172 ms
[16:54:39] Starting 'less'...
[16:54:39] Starting 'scripts'...
[BS] 1 file changed (style.css)
[16:54:40] Finished 'less' after 1.05 s
[16:54:40] Starting 'css-libs'...
[16:54:40] Finished 'css-libs' after 1.89 ms
[16:54:40] Finished 'scripts' after 1.05 s
[16:54:40] Starting 'watch'...
[16:54:40] Finished 'watch' after 11 ms
[16:54:40] Starting 'default'...
[16:54:40] Finished 'default' after 1.39 μs
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.0.103:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.103:3001
--------------------------------------
[BS] Serving files from: app