Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- "use strict";
- /* параметры для gulp-autoprefixer */
- var autoprefixerList = [
- 'Chrome >= 45',
- 'Firefox ESR',
- 'Edge >= 12',
- 'Explorer >= 10',
- 'iOS >= 9',
- 'Safari >= 9',
- 'Android >= 4.4',
- 'Opera >= 30'
- ];
- /* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */
- var path = {
- vendor: {
- js: 'app/js/vendor/',
- css: 'app/css/vendor/'
- },
- dist: { //Тут мы укажем куда складывать готовые после сборки файлы
- html: 'dist/',
- php: 'dist/',
- js: 'dist/js/',
- scss: 'dist/css/',
- css: 'dist/css/',
- img: 'dist/img/',
- fonts: 'dist/fonts/'
- },
- app: { //Пути откуда брать исходники
- html: 'app/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
- php: 'app/*.php',
- js: 'app/js/*.js',//В стилях и скриптах нам понадобятся только main файлы
- scss: 'app/css/*.scss',
- css: 'app/css/*.css',
- img: 'app/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
- fonts: 'app/fonts/**/*.*'
- },
- watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
- html: 'app/**/*.html',
- php: 'app/**/*.php',
- js: 'app/js/**/*.js',
- scss: 'app/css/**/*.scss',
- css: 'app/css/**/*.css',
- img: 'app/img/**/*.*',
- fonts: 'app/fonts/**/*.*'
- },
- clean: './dist'
- };
- /* настройки сервера */
- var config = {
- proxy: "nadejda",
- files: ["**/*.php"],
- notify: false,
- tunnel: false,
- host: 'localhost',
- port: 8081,
- logPrefix: "VeterSM"
- };
- /* подключаем gulp и плагины */
- var gulp = require('gulp'), // подключаем Gulp
- webserver = require('browser-sync'), // сервер для работы и автоматического обновления страниц
- plumber = require('gulp-plumber'), // модуль для отслеживания ошибок
- rigger = require('gulp-rigger'), // модуль для импорта содержимого одного файла в другой
- sourcemaps = require('gulp-sourcemaps'), // модуль для генерации карты исходных файлов
- sass = require('gulp-sass'), // модуль для компиляции SASS (SCSS) в CSS
- autoprefixer = require('gulp-autoprefixer'), // модуль для автоматической установки автопрефиксов
- cleanCSS = require('gulp-clean-css'), // плагин для минимизации CSS
- uglify = require('gulp-uglify'), // модуль для минимизации JavaScript
- cache = require('gulp-cache'), // модуль для кэширования
- imagemin = require('gulp-imagemin'), // плагин для сжатия PNG, JPEG, GIF и SVG изображений
- jpegrecompress = require('imagemin-jpeg-recompress'), // плагин для сжатия jpeg
- pngquant = require('imagemin-pngquant'), // плагин для сжатия png
- del = require('del'), // плагин для удаления файлов и каталогов
- reload = webserver.reload;
- /* задачи */
- // запуск сервера
- gulp.task('webserver', function () {
- webserver(config);
- });
- // сбор html
- gulp.task('html:build', function () {
- gulp.src(path.app.html) // выбор всех html файлов по указанному пути
- .pipe(plumber()) // отслеживание ошибок
- .pipe(rigger()) // импорт вложений
- .pipe(gulp.dest(path.dist.html)) // выкладывание готовых файлов
- .pipe(webserver.reload({stream: true})); // перезагрузка сервера
- });
- gulp.task('php:build', function () {
- gulp.src(path.app.php) // выбор всех html файлов по указанному пути
- .pipe(plumber()) // отслеживание ошибок
- .pipe(rigger()) // импорт вложений
- .pipe(gulp.dest(path.dist.php)) // выкладывание готовых файлов
- .pipe(webserver.reload({stream: true})); // перезагрузка сервера
- });
- // сбор стилей
- gulp.task('scss:build', function () {
- gulp.src(path.app.scss) // получим main.scss
- .pipe(plumber()) // для отслеживания ошибок
- .pipe(sourcemaps.init()) // инициализируем sourcemap
- .pipe(sass()) // scss -> css
- .pipe(autoprefixer({ // добавим префиксы
- browsers: autoprefixerList
- }))
- .pipe(cleanCSS()) // минимизируем CSS
- .pipe(sourcemaps.write('./')) // записываем sourcemap
- .pipe(gulp.dest(path.dist.css)) // выгружаем в build
- .pipe(webserver.reload({stream: true})); // перезагрузим сервер
- });
- gulp.task('css:build', function () {
- gulp.src(path.app.css) //Выберем наш main.css
- .pipe(sourcemaps.init()) //То же самое что и с js
- .pipe(cleanCSS()) //Сожмем
- .pipe(sourcemaps.write())
- .pipe(gulp.dest(path.dist.css)) //И в build
- .pipe(webserver.reload({stream: true}));
- });
- // сбор js
- gulp.task('js:build', function () {
- gulp.src(path.app.js) // получим файл main.js
- .pipe(plumber()) // для отслеживания ошибок
- .pipe(rigger()) // импортируем все указанные файлы в main.js
- .pipe(sourcemaps.init()) //инициализируем sourcemap
- .pipe(uglify()) // минимизируем js
- .pipe(sourcemaps.write('./')) // записываем sourcemap
- .pipe(gulp.dest(path.dist.js)) // положим готовый файл
- .pipe(webserver.reload({stream: true})); // перезагрузим сервер
- });
- // перенос шрифтов
- gulp.task('fonts:build', function() {
- gulp.src(path.app.fonts)
- .pipe(gulp.dest(path.dist.fonts));
- });
- // обработка картинок
- gulp.task('image:build', function () {
- gulp.src(path.app.img) // путь с исходниками картинок
- .pipe(cache(imagemin([ // сжатие изображений
- imagemin.gifsicle({interlaced: true}),
- jpegrecompress({
- progressive: true,
- max: 90,
- min: 80
- }),
- pngquant(),
- imagemin.svgo({plugins: [{removeViewBox: false}],
- use: [pngquant()]})
- ])))
- .pipe(gulp.dest(path.dist.img)); // выгрузка готовых файлов
- });
- // удаление каталога build
- gulp.task('clean:build', function () {
- del.sync(path.clean);
- });
- // очистка кэша
- gulp.task('cache:clear', function () {
- cache.clearAll();
- });
- // сборка
- gulp.task('build', [
- 'html:build',
- 'php:build',
- 'js:build',
- 'scss:build',
- 'css:build',
- 'fonts:build',
- 'image:build'
- ]);
- // запуск задач при изменении файлов
- gulp.task('watch', function() {
- gulp.watch(path.watch.html, ['html:build']);
- gulp.watch(path.watch.php, ['php:build']);
- gulp.watch(path.watch.scss, ['scss:build']);
- gulp.watch(path.watch.css, ['css:build']);
- gulp.watch(path.watch.js, ['js:build']);
- gulp.watch(path.watch.img, ['image:build']);
- gulp.watch(path.watch.fonts, ['fonts:build']);
- });
- gulp.task('webserver', function () {
- webserver(config);
- });
- // задача по умолчанию
- gulp.task('default', [
- 'clean:build',
- 'build',
- 'webserver',
- 'watch'
- ]);
Add Comment
Please, Sign In to add comment