Last active
August 29, 2015 14:18
-
-
Save cikoriicabachkov/e32ee42bcc9986e48e16 to your computer and use it in GitHub Desktop.
Bullet-proff gulpfile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
var gulp = require('gulp'), | |
watch = require('gulp-watch'), | |
prefixer = require('gulp-autoprefixer'), | |
uglify = require('gulp-uglify'), | |
sass = require('gulp-sass'), | |
sourcemaps = require('gulp-sourcemaps'), | |
rigger = require('gulp-rigger'), | |
cssmin = require('gulp-minify-css'), | |
imagemin = require('gulp-imagemin'), | |
pngquant = require('imagemin-pngquant'), | |
rimraf = require('rimraf'), | |
browserSync = require("browser-sync"), | |
reload = browserSync.reload, | |
plumber = require('gulp-plumber'); | |
var onError = function(err) { | |
console.log(err); | |
} | |
var path = { | |
build: { //Тут мы укажем куда складывать готовые после сборки файлы | |
html: 'build/', | |
js: 'build/js/', | |
css: 'build/css/', | |
img: 'build/img/', | |
fonts: 'build/fonts/' | |
}, | |
src: { //Пути откуда брать исходники | |
html: 'src/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html | |
js: 'src/js/main.js',//В стилях и скриптах нам понадобятся только main файлы | |
style: 'src/style/main.scss', | |
img: 'src/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов | |
fonts: 'src/fonts/**/*.*' | |
}, | |
watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать | |
html: 'src/**/*.html', | |
js: 'src/js/**/*.js', | |
style: 'src/style/**/*.scss', | |
img: 'src/img/**/*.*', | |
fonts: 'src/fonts/**/*.*' | |
}, | |
clean: './build' | |
}; | |
var config = { | |
server: { | |
baseDir: "./build" | |
}, | |
tunnel: true, | |
host: 'localhost', | |
port: 9000, | |
logPrefix: "Frontend_Devil" | |
}; | |
gulp.task('html:build', function () { | |
gulp.src(path.src.html) //Выберем файлы по нужному пути | |
.pipe(rigger()) //Прогоним через rigger | |
.pipe(gulp.dest(path.build.html)) //Выплюнем их в папку build | |
.pipe(reload({stream: true})); //И перезагрузим наш сервер для обновлений | |
}); | |
gulp.task('js:build', function () { | |
gulp.src(path.src.js) //Найдем наш main файл | |
.pipe(rigger()) //Прогоним через rigger | |
.pipe(sourcemaps.init()) //Инициализируем sourcemap | |
.pipe(uglify()) //Сожмем наш js | |
.pipe(sourcemaps.write()) //Пропишем карты | |
.pipe(gulp.dest(path.build.js)) //Выплюнем готовый файл в build | |
.pipe(reload({stream: true})); //И перезагрузим сервер | |
}); | |
gulp.task('style:build', function () { | |
gulp.src(path.src.style) //Выберем наш main.scss | |
.pipe(plumber({ | |
errorHandler: onError | |
})) | |
.pipe(sourcemaps.init()) //То же самое что и с js | |
.pipe(sass()) //Скомпилируем | |
.pipe(prefixer()) //Добавим вендорные префиксы | |
.pipe(cssmin()) //Сожмем | |
.pipe(sourcemaps.write()) | |
.pipe(gulp.dest(path.build.css)) //И в build | |
.pipe(reload({stream: true})); | |
}); | |
gulp.task('image:build', function () { | |
gulp.src(path.src.img) //Выберем наши картинки | |
.pipe(imagemin({ //Сожмем их | |
progressive: true, | |
svgoPlugins: [{removeViewBox: false}], | |
use: [pngquant()], | |
interlaced: true | |
})) | |
.pipe(gulp.dest(path.build.img)) //И бросим в build | |
.pipe(reload({stream: true})); | |
}); | |
gulp.task('fonts:build', function() { | |
gulp.src(path.src.fonts) | |
.pipe(gulp.dest(path.build.fonts)) | |
}); | |
gulp.task('build', [ | |
'html:build', | |
'js:build', | |
'style:build', | |
'fonts:build', | |
'image:build' | |
]); | |
gulp.task('watch', function(){ | |
watch([path.watch.html], function(event, cb) { | |
gulp.start('html:build'); | |
}); | |
watch([path.watch.style], function(event, cb) { | |
gulp.start('style:build'); | |
}); | |
watch([path.watch.js], function(event, cb) { | |
gulp.start('js:build'); | |
}); | |
watch([path.watch.img], function(event, cb) { | |
gulp.start('image:build'); | |
}); | |
watch([path.watch.fonts], function(event, cb) { | |
gulp.start('fonts:build'); | |
}); | |
}); | |
gulp.task('webserver', function () { | |
browserSync(config); | |
}); | |
gulp.task('clean', function (cb) { | |
rimraf(path.clean, cb); | |
}); | |
gulp.task('default', ['build', 'webserver', 'watch']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment